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:

But only the label gets a white background.

Answer 1

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

Answer 2

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_())