Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Customization of push button
Forum Updated to NodeBB v4.3 + New Features

Customization of push button

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 5 Posters 13.7k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M mostefa

    @David406 said in Customization of push button:

    @mostefa
    Thanks.
    Yes, my button is checkable.
    I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
    

    only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

    Ok

    Then what about unchecked property?

    QPushButton:unchecked{background-color: white;};
    
    D Offline
    D Offline
    David406
    wrote on last edited by
    #16

    @mostefa
    Unfortunately,

    QPushButton:unchecked{background-color: white;};
    

    doesn't help.

    1 Reply Last reply
    0
    • D David406

      @J.Hilk
      Thanks.
      Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

      alt text

      M Offline
      M Offline
      mostefa
      wrote on last edited by mostefa
      #17

      @David406 said in Customization of push button:

      @J.Hilk
      Thanks.
      Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

      alt text

      Hi again @David406

      i am not sure that setFlat(true) is really what do you want,

      http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

      The doc actually says:

      If this property is set, most styles will not paint the button background unless the button is being pressed.
      

      And i think that this is your problem,

      So i suggest you to delete the line pushbutton->setFlat(true)

      And setStylesheet of your PushButton as follow

      QPushButton
      {
      border-style: outset;
      background-color: red ;/** for example **/
      }
      

      Keep me informed if this is what you want or no?

      Best regards !

      D 1 Reply Last reply
      3
      • M mostefa

        @David406 said in Customization of push button:

        @J.Hilk
        Thanks.
        Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

        alt text

        Hi again @David406

        i am not sure that setFlat(true) is really what do you want,

        http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

        The doc actually says:

        If this property is set, most styles will not paint the button background unless the button is being pressed.
        

        And i think that this is your problem,

        So i suggest you to delete the line pushbutton->setFlat(true)

        And setStylesheet of your PushButton as follow

        QPushButton
        {
        border-style: outset;
        background-color: red ;/** for example **/
        }
        

        Keep me informed if this is what you want or no?

        Best regards !

        D Offline
        D Offline
        David406
        wrote on last edited by David406
        #18

        @mostefa
        Thanks again.
        Yes, this helped. But there are separators between the buttons which I don't want, see below:

        alt text

        this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

        J.HilkJ M 2 Replies Last reply
        0
        • D David406

          @mostefa
          Thanks again.
          Yes, this helped. But there are separators between the buttons which I don't want, see below:

          alt text

          this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #19

          @David406

          QPushButton{border: none;}
          

          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          M 1 Reply Last reply
          1
          • D David406

            @mostefa
            Thanks again.
            Yes, this helped. But there are separators between the buttons which I don't want, see below:

            alt text

            this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

            M Offline
            M Offline
            mostefa
            wrote on last edited by mostefa
            #20

            @David406 said in Customization of push button:

            this is also the reason I used setflat(true)

            Any suggestion to eliminate those separators?

            How are you adding your buttons?

            With yourPushButton->move(x + width - 8 * 32, y + height);
            why -8*32 ,cause of spacing is maybe here, why just -8 * 32 ?

            1 Reply Last reply
            0
            • J.HilkJ J.Hilk

              @David406

              QPushButton{border: none;}
              
              M Offline
              M Offline
              mostefa
              wrote on last edited by
              #21

              @J.Hilk said in Customization of push button:

              @David406

              QPushButton{border: none;}
              

              AFAIK border: none; will not change anything

              D J.HilkJ 2 Replies Last reply
              0
              • M mostefa

                @J.Hilk said in Customization of push button:

                @David406

                QPushButton{border: none;}
                

                AFAIK border: none; will not change anything

                D Offline
                D Offline
                David406
                wrote on last edited by David406
                #22

                @mostefa
                Yes, border: none; is the default setting.
                And I want to be able to move those buttons around, so I did not use layout to add these buttons.

                1 Reply Last reply
                0
                • M mostefa

                  @J.Hilk said in Customization of push button:

                  @David406

                  QPushButton{border: none;}
                  

                  AFAIK border: none; will not change anything

                  J.HilkJ Offline
                  J.HilkJ Offline
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #23

                  @mostefa

                  Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton


                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  D 1 Reply Last reply
                  1
                  • J.HilkJ J.Hilk

                    @mostefa

                    Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton

                    D Offline
                    D Offline
                    David406
                    wrote on last edited by
                    #24

                    @J.Hilk
                    Yes, I checked it too. This really helped.
                    border-style:none; is default, not border:none;
                    Thank you all !!!

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      David406
                      wrote on last edited by David406
                      #25

                      Hi all, I have one more question. How can I let the buttons pushed down when mouse hovers on it, like below:

                      alt text

                      The arrow button is pushed down when my mouse hovers on it.
                      Could you please give some hints on what method to use? There's no hover or enter event for a button.

                      Aside: When border is set to none, there would never appear a border even when I pused on it, which is not what I meant to do. Confused!

                      J.HilkJ 1 Reply Last reply
                      0
                      • D David406

                        Hi all, I have one more question. How can I let the buttons pushed down when mouse hovers on it, like below:

                        alt text

                        The arrow button is pushed down when my mouse hovers on it.
                        Could you please give some hints on what method to use? There's no hover or enter event for a button.

                        Aside: When border is set to none, there would never appear a border even when I pused on it, which is not what I meant to do. Confused!

                        J.HilkJ Offline
                        J.HilkJ Offline
                        J.Hilk
                        Moderators
                        wrote on last edited by
                        #26

                        @David406

                        QStyleSheet is also here your friend. For example:

                        QPushButton:hover{background-color:red;}
                        

                        Here a link to some examples


                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                        Q: What's that?
                        A: It's blue light.
                        Q: What does it do?
                        A: It turns blue.

                        D 1 Reply Last reply
                        3
                        • J.HilkJ J.Hilk

                          @David406

                          QStyleSheet is also here your friend. For example:

                          QPushButton:hover{background-color:red;}
                          

                          Here a link to some examples

                          D Offline
                          D Offline
                          David406
                          wrote on last edited by
                          #27

                          @J.Hilk
                          Oh, yes! Please forgive me, I'm quite new about the usage of stylesheet! So I need to set different stylesheet for normal, hover and pushed status.

                          J.HilkJ 1 Reply Last reply
                          0
                          • D David406

                            @J.Hilk
                            Oh, yes! Please forgive me, I'm quite new about the usage of stylesheet! So I need to set different stylesheet for normal, hover and pushed status.

                            J.HilkJ Offline
                            J.HilkJ Offline
                            J.Hilk
                            Moderators
                            wrote on last edited by
                            #28

                            @David406

                            that would be correct:

                            a small example:

                            ui->myButton->setStyleSheet(
                            //Default Button
                            "QPushButton{border:none; color: black; background-color:transparent;}"
                            //When mose over
                            "QPushButton:hover{border: 1px solid grey; color: red; background-color:white;}"
                            //When checked
                            "QPushButton:checked{border: 1px solid black; color: white; background-color:red;}"
                            );
                            

                            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                            Q: What's that?
                            A: It's blue light.
                            Q: What does it do?
                            A: It turns blue.

                            1 Reply Last reply
                            2

                            • Login

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • Users
                            • Groups
                            • Search
                            • Get Qt Extensions
                            • Unsolved