How to apply style sheet to a custom widget in PyQt

Question

# -*- coding: utf-8 -*-

import sys
from PyQt4.QtGui import *  
from PyQt4.QtCore import * 

class MainWindow(QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()

        self.setFixedWidth(200)
        self.setFixedHeight(200)

        stylesheet = \
            ".QWidget {\n" \
            + "border: 20px solid black;\n" \
            + "border-radius: 4px;\n" \
            + "background-color: rgb(255, 255, 255);\n" \
            + "}"
        self.setStyleSheet(stylesheet)

if __name__ == '__main__':

    app = QApplication(sys.argv)
    main = MainWindow()
    main.show()
    sys.exit(app.exec_())

I want to add a border to a custom widget with style sheet, but the style sheet does not seem to work, anything wrong?

although you did receive an answer that seems adequate, please consider being more specific than "does not work as expected", by saying (even now that your question has been answered) what specifically did you expect and what portion of this did not work. — Oliver, Mar 20 '14 at 21:32

ekhumoro · Accepted Answer · 2019-11-08T16:55:24.673

37

Firstly: add an actual widget to your example:

    self.widget = QWidget(self)
    layout = QVBoxLayout(self)
    layout.addWidget(self.widget)

Secondly: do yourself a favour, and use triple-quotes:

    self.widget.setStyleSheet("""
        QWidget {
            border: 20px solid black;
            border-radius: 10px;
            background-color: rgb(255, 255, 255);
            }
        """)

The dot-selector in your example is redundant. What it does is specify that only instances of QWidget itself will be selected, as opposed to sub-classes of QWidget. See the StyleSheet Syntax guide in the Qt docs.

edited Nov 08 '19 at 16:55

answered Mar 19 '14 at 19:59

ekhumoro

115,249
20
229
336

For whatever reason, removing the dot-selector was the difference that made this work for me! – LOlliffe Apr 11 '19 at 06:05

score 12 · Answer 2 · edited Jul 22 '19 at 11:15

12

In your project folder add a basic CSS file mystylesheet.css. Mutli-language editors like Atom are best for this type of things. The syntax highlighting works properly if you keep it named a CSS file.

Then drop the dot; qt knows what you mean.

mystylesheet.css

QWidget {
    border: 20px solid black;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
}

anyQelement.setStyleSheet(open('mystylesheet.css').read())

edited Jul 22 '19 at 11:15

eyllanesc

235,170
19
170
241

answered Sep 27 '18 at 05:18

Eric Petersen

121
1
4

3

Would it be better to use with open("mystylesheet.css", 'r') as file: sheet = file.read() anyQelement.setStyleSheet(sheet) to ensure the file is closed properly? – rwalroth Jun 10 '20 at 23:20

How to apply style sheet to a custom widget in PyQt

2 Answers2

Linked