how to set the background color of a qwidget using stylesheets?

Question

There is something about Qt stylesheets that I don't seem to understand. I would simply like to set the background color of a widget to white. But for some reason the background color actually only appears in my widget's children.

I've tried to add self.setAutoFillBackground(True) to my code, but without success.

I've also tried to palette solution from https://wiki.qt.io/How_to_Change_the_Background_Color_of_QWidget. It worked but only if I don't set a stylesheet, which is needed for the bottom border.

class TopLabelNewProject(qt.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        layout = qt.QHBoxLayout(self)
        layout.setContentsMargins(40, 0, 32, 0)
        self.setLayout(layout)
        self.setFixedHeight(80)
        self.setStyleSheet("""
            background-color: white;
            border-bottom: 1px solid %s;
            """ % colors.gray)

        self.label = qt.QLabel("Dashboard")
        self.label.setStyleSheet("""
            QLabel {
                font: medium Ubuntu;
                font-size: 20px;
                color: %s;
            }""" % colors.gray_dark)
        layout.addWidget(self.label, alignment=qt.Qt.AlignLeft)

        self.newProjectButton = Buttons.DefaultButton("New project", self)
        layout.addWidget(self.newProjectButton, alignment=qt.Qt.AlignRight)

Note: the Buttons.DefaultButton is just a QPushButton with a custom stylesheet.

This is what I would like to achieve, a white header bar with a label and a button: what I want

But only the label gets a white background.

what I get

I found a solution : `self.setAttribute(qt.Qt.WA_StyledBackground, True)` But I don't understand why this is needed. Setting a background color in the stylesheet makes it pretty explicit that I do really want to "use a styled background" — PiRK, Jan 28 '19 at 17:25
Possible duplicate of [QWidget does not draw background color](https://stackoverflow.com/questions/23104051/qwidget-does-not-draw-background-color) — ekhumoro, Jan 28 '19 at 18:36

score 3 · Answer 1 · answered Jan 28 '19 at 19:21

Try it:

import sys
from PyQt5 import Qt as qt 

class TopLabelNewProject(qt.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        layout = qt.QHBoxLayout(self)
        layout.setContentsMargins(40, 0, 32, 0)
        self.setLayout(layout)
        self.setFixedHeight(80)

        self.label = qt.QLabel("Dashboard")

        layout.addWidget(self.label, alignment=qt.Qt.AlignLeft)

#        self.newProjectButton = Buttons.DefaultButton("New project", self)
        self.newProjectButton = qt.QPushButton("New project", self)
        layout.addWidget(self.newProjectButton, alignment=qt.Qt.AlignRight)


style = '''
QWidget {
    background-color: white;
} 

QLabel {
    font: medium Ubuntu;
    font-size: 20px;
    color: #006325;     
}        

QPushButton {
    background-color: #006325;
    color: white;

    min-width:  70px;
    max-width:  70px;
    min-height: 70px;
    max-height: 70px;

    border-radius: 35px;        
    border-width: 1px;
    border-color: #ae32a0;
    border-style: solid;
}
QPushButton:hover {
    background-color: #328930;
}
QPushButton:pressed {
    background-color: #80c342;
}    

'''


if __name__ == '__main__':
    app = qt.QApplication(sys.argv)

    app.setStyleSheet(style)

    ex = TopLabelNewProject()
    ex.show()
    sys.exit(app.exec_())

This works, thanks. Obviously I would need to be more specific with my type selector if I don't want all other `QWidgets` in my application to have a white background too and all my buttons to be green and rounded. — PiRK, Jan 29 '19 at 07:41
But seeing a different result when I set the stylesheet on the application rather than the widget makes the stylesheet machinery even more obscure to me. — PiRK, Jan 29 '19 at 07:42
see https://stackoverflow.com/questions/52637147/python-qt-change-the-background-color-of-a-button-not-just-border/52654497#52654497 — S. Nick, Jan 29 '19 at 08:51

score 0 · Answer 2 · answered Jul 02 '19 at 07:58

First(change only one widget): Rightclick of the Widget, click "Change Stylesheet" and the Stylesheet window open, when you cange something inside the window you the widget will changed too. Second(change all selected widget): Use the property window, mark all widget you want to change, click of the ... of the styleSheetrow. The styleSheet window open when you change now something all widget you selected will change.

Instert into Stylesheet:

QLabel <-- Elementname

{ ...... } <-- curly braces must be set around of the changes

background-color: Black; <--- set the Backgroundcolor

A full example:

    QLabel{
    border-style: outset;
    border-width: 2px;
    border-color: black;
    Background-color: rgb(255,247,191);
    color: black;
    }

For more information about the Sylesheet window read https://doc.qt.io/Qt-5/stylesheet-syntax.html

Friendly wishes sniffi

how to set the background color of a qwidget using stylesheets?

2 Answers2