Results 1 to 13 of 13

Thread: Removing gradient from QPushButton

  1. #1
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Removing gradient from QPushButton

    Hello all,

    I'm new to QT and I apologize if this has been has been asked before but I can't see to find this info anywhere.

    using QT 4.3.3 on OpenSuse 10.3

    I have QpushButtons that are being dynamically created and added to a layout in a frame.
    How do I make a QPushButton not have a gradient for the background color? I'm setting the style sheet of the button to be:

    Qt Code:
    1. pushButton->setStyleSheet{"background-color: white; color:black;}";
    To copy to clipboard, switch view to plain text mode 

    and when I see the button on the screen it's not solid while with black text. The background is a white to grey gradient. I know I could create an all white image and use that as the background, but it seems like there should be a straight forward way to do this.

    So is there a way to do this using the style sheet or do I need another approach, like modifing the Brush in the control's palette.

    Thanks for your time.
    Last edited by Lexrst; 22nd April 2008 at 00:56. Reason: added code highlighting

  2. #2
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 333 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Try setting the setAutoFillBackground() property and see if it works

    Also cud u show more code where u are setting the stylesheet ?

  3. #3
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    I broke it down to the simplest test and I still can't seem to accomplish what I'm after.

    Qt Code:
    1. void MainWindow::changeButtonColor()
    2. {
    3. //pushButton->setStyleSheet("color: black; background-color: white;");
    4. // tried both lines
    5. pushButton->setStyleSheet("color: black; background: white;");
    6. pushButton->setAutoFillBackground(true);
    7. }
    To copy to clipboard, switch view to plain text mode 

    this code is declared as a slot and connected to a QPushButton on the MainWindow that's been created. When this code is executed the button still shows a white to gray gradient. What I'd like to see is a button that is a solid white background with black text.

  4. #4
    Join Date
    Feb 2006
    Location
    Romania
    Posts
    2,744
    Thanks
    8
    Thanked 541 Times in 521 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    I think the property for the back color is background-color, not background.

  5. #5
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Quote Originally Posted by marcel View Post
    I think the property for the back color is background-color, not background.
    I tried background-color first and then tried background just to see if it made any difference and it didn't change anything.

  6. #6
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    I found a way to get the buttons to have a solid color background.

    Qt Code:
    1. pushButton->setStyleSheet("background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 white, stop: 1 white);");
    To copy to clipboard, switch view to plain text mode 

    Now the question becomes why do I have to use a qlineargradient to get the QPushButton to be a solid color.

  7. #7
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,356
    Thanks
    3
    Thanked 5,010 Times in 4,789 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Blog Entries
    4
    Wiki edits
    10

    Default Re: Removing gradient from QPushButton

    Does the problem occur with all widget styles or a particular one (probably plastique)?

  8. The following user says thank you to wysota for this useful post:

    Lexrst (22nd April 2008)

  9. #8
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Quote Originally Posted by wysota View Post
    Does the problem occur with all widget styles or a particular one (probably plastique)?
    The style of the widget seems to be the cause of my problem. All other styles I tried (CDE, Motif, Cleanlooks, Windows) seem to work as expected, giving me the solid color background I expected. Only Plastique seems to have the issue described in this thread.

    So I have a way to accomplish what I need but now the question becomes..
    Why does the plastique style override what I put in the StyleSheet and force it to be a gradient when I specify a single color?

    Thanks for a push in the right direction!

  10. #9
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,356
    Thanks
    3
    Thanked 5,010 Times in 4,789 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Blog Entries
    4
    Wiki edits
    10

    Default Re: Removing gradient from QPushButton

    What happens if you overload the style for different states of the button like :hover?


    QPushButton, QPushButton:hover { background: white; color: black; }

  11. #10
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Quote Originally Posted by wysota View Post
    What happens if you overload the style for different states of the button like :hover?


    QPushButton, QPushButton:hover { background: white; color: black; }
    Sorry for not getting back to this sooner. Been focused on other projects.

    If I overload for :hover, with the above sytnax, using the Plastique style I still don't get a solid color background in the button, it's a white to grey gradient. I get similar results if I overload for :pressed with the same syntax.

    So I'm using a qlineargradient to get a solid color background for my QPushButton, when using the Plastique style.

    From my testing this only appears to happen with the Plastique style and not with any other sytle that I tried.

  12. #11
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,356
    Thanks
    3
    Thanked 5,010 Times in 4,789 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Blog Entries
    4
    Wiki edits
    10

    Default Re: Removing gradient from QPushButton

    This might be a bug in stylesheets or plastique.

  13. #12
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Quote Originally Posted by wysota View Post
    This might be a bug in stylesheets or plastique.
    Along the lines of what I was thinking.

    It's as if the QStyle is being applied no matter what I specify in the style sheet, when the plastique style is used. Other styles I tried, behaved as I expected when stylesheets were used to modify the look of the QPushButton.

  14. #13
    Join Date
    Jan 2019
    Posts
    1
    Qt products
    Platforms
    Unix/X11 Windows

    Default Re: Removing gradient from QPushButton

    Quote Originally Posted by Lexrst View Post
    Hello all,

    I'm new to QT and I apologize if this has been has been asked before but I can't see to find this info anywhere.

    using QT 4.3.3 on OpenSuse 10.3

    I have QpushButtons that are being dynamically created and added to a layout in a frame.
    How do I make a QPushButton not have a gradient for the background color? I'm setting the style sheet of the button to be:

    Qt Code:
    1. pushButton->setStyleSheet{"background-color: white; color:black;}";
    To copy to clipboard, switch view to plain text mode 

    and when I see the button on the screen it's not solid while with black text. The background is a white to grey gradient. I know I could create an all white image and use that as the background, but it seems like there should be a straight forward way to do this.

    So is there a way to do this using the style sheet or do I need another approach, like modifing the Brush in the control's palette.

    Thanks for your time.
    I know this is from 2008, but as the answer is not posted here, I will answer this for anyone who arrived here from Google as I did with the same question. The answer comes from this page:

    http://doc.qt.io/archives/qt-4.8/sty...reference.html

    Where it says:

    Warning: If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color

    So, setting the border to none will remove that gradient.

    QPushButton { background-color: red; border: none; }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.