{"id":5374,"date":"2022-10-24T10:10:25","date_gmt":"2022-10-24T10:10:25","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5374"},"modified":"2022-10-24T10:12:00","modified_gmt":"2022-10-24T10:12:00","slug":"qt-style-sheets","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/qt-style-sheets\/","title":{"rendered":"Qt Style Sheets"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use Qt Style Sheet to customize the widgets for PyQt applications.<\/p>\n\n\n\n

Introduction to the Qt Style Sheets #<\/a><\/h2>\n\n\n\n

Qt Style Sheets or QSS is very much similar to Cascading Style Sheets (CSS) for the web. However, QSS supports only a limited number of rules in comparison with CSS. For example, QSS supports the box model but doesn’t support the flexbox and grid layouts. <\/p>\n\n\n\n

To set the style sheets for a widget, you call its setStyleSheet()<\/code> method with a style sheet string. To demonstrate QSS, we’ll turn the following login window:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

…into the following login window:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The following program creates a login window that appears in the first picture without any style sheets.<\/p>\n\n\n

import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout\nfrom<\/span> PyQt6.QtCore import<\/span> Qt\nfrom<\/span> PyQt6.QtGui import<\/span> QIcon\n\n\nclass<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n        super().__init__(*args, **kwargs)\n        self.setWindowTitle('Login'<\/span>)\n        self.setWindowIcon(QIcon('.\/assets\/lock.png'<\/span>))\n\n        layout = QVBoxLayout()\n        self.setLayout(layout)\n\n        heading = QLabel(\n            'Welcome Back'<\/span>,\n            alignment=Qt.AlignmentFlag.AlignHCenter\n        )\n        heading.setObjectName('heading'<\/span>)\n\n        subheading = QLabel(\n            'Please enter your email and password to log in.'<\/span>,\n            alignment=Qt.AlignmentFlag.AlignHCenter\n        )\n        subheading.setObjectName('subheading'<\/span>)\n\n        self.email = QLineEdit(self)\n        self.email.setPlaceholderText('Enter your email'<\/span>)\n\n        self.password = QLineEdit(self)\n        self.password.setEchoMode(QLineEdit.EchoMode.Password)\n        self.password.setPlaceholderText('Enter your password'<\/span>)\n\n        self.btn_login = QPushButton('Login'<\/span>)\n\n        layout.addStretch()\n        layout.addWidget(heading)\n        layout.addWidget(subheading)\n        layout.addWidget(QLabel('Email:'<\/span>))\n        layout.addWidget(self.email)\n        layout.addWidget(QLabel('Password:'<\/span>))\n        layout.addWidget(self.password)\n        layout.addWidget(self.btn_login)\n        layout.addStretch()\n\n        self.show()\n\n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    window = MainWindow()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
First, make the background of the QWidget<\/code> white:<\/p>\n\n\n
QWidget<\/span> {\n  background-color<\/span>: #fff<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, change the color and font weight of the QLabel<\/code>:<\/p>\n\n\n
QLabel<\/span> {\n  color<\/span>: #464d55<\/span>;\n  font-weight<\/span>: 600<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, change the color, font size, and margin-bottom of the QLabel<\/code> with the object name heading:<\/p>\n\n\n
QLabel<\/span>#heading<\/span> {\n  color<\/span>: #0f1925<\/span>;\n  font-size<\/span>: 18px<\/span>;\n  margin-bottom<\/span>: 10px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Fourth, change the color, font size, font weight, and margin-bottom of the QLabel<\/code> with the object name subheading:<\/p>\n\n\n
QLabel<\/span>#subheading<\/span> {\n  color<\/span>: #0f1925<\/span>;\n  font-size<\/span>: 12px<\/span>;\n  font-weight<\/span>: normal;\n  margin-bottom<\/span>: 10px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Fifth, change the border-radius, border style, and padding of the QLineEdit<\/code> widget:<\/p>\n\n\n
QLineEdit<\/span> {\n  border-radius<\/span>: 8px<\/span>;\n  border<\/span>: 1px<\/span> solid #e0e4e7<\/span>;\n  padding<\/span>: 5px<\/span> 15px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Sixth, highlight the border of the QLineEdit<\/code> when it has the focus:<\/p>\n\n\n
QLineEdit<\/span>:focus<\/span> {\n  border<\/span>: 1px<\/span> solid #d0e3ff<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Seventh, change the color of the placeholder:<\/p>\n\n\n
QLineEdit<\/span>::placeholder<\/span> {\n  color<\/span>: #767e89<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Eighth, make the QPushButton<\/code> rounded and blue with the text color white:<\/p>\n\n\n
QPushButton<\/span> {\n  background-color<\/span>: #0d6efd<\/span>;\n  color<\/span>: #fff<\/span>;\n  font-weight<\/span>: 600<\/span>;\n  border-radius<\/span>: 8px<\/span>;\n  border<\/span>: 1px<\/span> solid #0d6efd<\/span>;\n  padding<\/span>: 5px<\/span> 15px<\/span>;\n  margin-top<\/span>: 10px<\/span>;\n  outline<\/span>: 0px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Ninth, change the border of the QPushButton<\/code> when it is hover or focus:<\/p>\n\n\n
QPushButton<\/span>:hover<\/span>,\nQPushButton<\/span>:focus<\/span> {\n  background-color<\/span>: #0b5ed7<\/span>;\n  border<\/span>: 3px<\/span> solid #9ac3fe<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Tenth, place all the rules of the QSS in a file like login.qss<\/code>:<\/p>\n\n\n
QWidget<\/span> {\n  background-color<\/span>: #fff<\/span>;\n}\nQLabel<\/span> {\n  color<\/span>: #464d55<\/span>;\n  font-weight<\/span>: 600<\/span>;\n}\nQLabel<\/span>#heading<\/span> {\n  color<\/span>: #0f1925<\/span>;\n  font-size<\/span>: 18px<\/span>;\n  margin-bottom<\/span>: 10px<\/span>;\n}\n\nQLabel<\/span>#subheading<\/span> {\n  color<\/span>: #0f1925<\/span>;\n  font-size<\/span>: 12px<\/span>;\n  font-weight<\/span>: normal;\n  margin-bottom<\/span>: 10px<\/span>;\n}\nQLineEdit<\/span> {\n  border-radius<\/span>: 8px<\/span>;\n  border<\/span>: 1px<\/span> solid #e0e4e7<\/span>;\n  padding<\/span>: 5px<\/span> 15px<\/span>;\n}\n\nQLineEdit<\/span>:focus<\/span> {\n  border<\/span>: 1px<\/span> solid #d0e3ff<\/span>;\n}\n\nQLineEdit<\/span>::placeholder<\/span> {\n  color<\/span>: #767e89<\/span>;\n}\nQPushButton<\/span> {\n  background-color<\/span>: #0d6efd<\/span>;\n  color<\/span>: #fff<\/span>;\n  font-weight<\/span>: 600<\/span>;\n  border-radius<\/span>: 8px<\/span>;\n  border<\/span>: 1px<\/span> solid #0d6efd<\/span>;\n  padding<\/span>: 5px<\/span> 15px<\/span>;\n  margin-top<\/span>: 10px<\/span>;\n  outline<\/span>: 0px<\/span>;\n}\nQPushButton<\/span>:hover<\/span>,\nQPushButton<\/span>:focus<\/span> {\n  background-color<\/span>: #0b5ed7<\/span>;\n  border<\/span>: 3px<\/span> solid #9ac3fe<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, read QSS from the login.qss<\/code> file and pass the contents to the setStyleSheet()<\/code> method of the QApplication<\/code> method:<\/p>\n\n\n
app.setStyleSheet(Path('login.qss'<\/span>).read_text())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s the complete program:<\/p>\n\n\n
import<\/span> sys\nfrom<\/span> pathlib import<\/span> Path\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout\nfrom<\/span> PyQt6.QtCore import<\/span> Qt\nfrom<\/span> PyQt6.QtGui import<\/span> QIcon\n\n\nclass<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n        super().__init__(*args, **kwargs)\n        self.setWindowTitle('Login'<\/span>)\n        self.setWindowIcon(QIcon('.\/assets\/lock.png'<\/span>))\n\n        layout = QVBoxLayout()\n        self.setLayout(layout)\n\n        heading = QLabel(\n            'Welcome Back'<\/span>,\n            alignment=Qt.AlignmentFlag.AlignHCenter\n        )\n        heading.setObjectName('heading'<\/span>)\n\n        subheading = QLabel(\n            'Please enter your email and password to log in.'<\/span>,\n            alignment=Qt.AlignmentFlag.AlignHCenter\n        )\n        subheading.setObjectName('subheading'<\/span>)\n\n        self.email = QLineEdit(self)\n        self.email.setPlaceholderText('Enter your email'<\/span>)\n\n        self.password = QLineEdit(self)\n        self.password.setEchoMode(QLineEdit.EchoMode.Password)\n        self.password.setPlaceholderText('Enter your password'<\/span>)\n\n        self.btn_login = QPushButton('Login'<\/span>)\n\n        layout.addStretch()\n        layout.addWidget(heading)\n        layout.addWidget(subheading)\n        layout.addWidget(QLabel('Email:'<\/span>))\n        layout.addWidget(self.email)\n        layout.addWidget(QLabel('Password:'<\/span>))\n        layout.addWidget(self.password)\n        layout.addWidget(self.btn_login)\n        layout.addStretch()\n\n        self.show()\n\n\nif<\/span> __name__ == '__main__'<\/span>:\n\n    app = QApplication(sys.argv)\n    app.setStyleSheet(Path('login.qss'<\/span>).read_text())\n    window = MainWindow()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Setting Qt Style sheets in Qt Designer #<\/a><\/h2>\n\n\n\n
First, right-click the form and select Change StyleSheet<\/code>… menu:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Second, enter the Qt Style Sheets into the Style Sheet Editor and click the Apply button. Once the QSS is applied, you’ll see its effect in the design:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Third, close the style sheet editor and preview the form (Ctrl-R):<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
  • Use Qt Style Sheets (QSS) to customize the widgets.<\/li>
  • Use the setStyleSheet()<\/code> method of the widgets to set style sheets for a widget.<\/li><\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t