Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

I can't style my widgets



  • Hello, I'm new to qtDesigner and I have a lack of knowledge of this tool. My problem is that I can't style my widgets (scrollaBar and buttons). In the image I have a scroll bar that should be red, but it is white. Does anyone know why?

    qt.png


  • Moderators

    Hi @_jao_victor_ , and welcome!

    I'm not sure why it's not working for you; I copied your stylesheet and it works for me (Qt 5.15.1, MSVC 2019 32-bit)

    Try copying the the example stylesheets at https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar and see if that works for you.



  • Hi @JKSH. Thanks for the help, but unfortunately I still have the problem. As you can see in the image, the styling works while I'm building the screen, but when I press "ctrl + r" for the screen to be executed, the styling doesn't appear. Another problem is that, when I transform this screen into a .py file, the buttons are the color of the theme of my Linux OS Mint Dark and it does not turn green, as they are in the image. Thanks.qtteste.png


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    Are you using PyQt5 ? PySide2 ? PySide6 ?


  • Moderators

    @_jao_victor_ The documentation says, "if one property or sub-control is customized, all the other properties or sub-controls must be customized as well." (https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar )

    Copy the example stylesheet and test that first.



  • @JKSH a part of the problem has been solved, thanks. Now, when I press "crtl + r" the executed screen follows the stylization. Now, there is another problem. When I run this GUI through Python (3.8.5), the stylizations are not working again.

    When I press "crtl + r":
    deucerto.png

    When I run with Python:
    deuerrado.png

    I'm sorry for the way i write, I'm reading the codes of conduct.



  • @SGaist I'm using PyQt5, more specifically version 5.14.1


  • Lifetime Qt Champion

    Can you provide a minimal runnable script that shows this behaviour ?



  • @SGaist This is the XML code of the screen that I used as an example:

    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>MainWindow</class>
     <widget class="QMainWindow" name="MainWindow">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>516</width>
        <height>623</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <property name="styleSheet">
       <string notr="true">background-color: rgb(255, 255, 255);</string>
      </property>
      <widget class="QWidget" name="centralwidget">
       <property name="styleSheet">
        <string notr="true">background-color: rgb(255, 255, 255);</string>
       </property>
       <layout class="QHBoxLayout" name="horizontalLayout">
        <item>
         <widget class="QScrollArea" name="scrollArea">
          <property name="styleSheet">
           <string notr="true"> QScrollBar:vertical {
         border: 2px solid grey;
         background: #32CC99;
         width: 15px;
         margin: 22px 0 22px 0;
     }
     QScrollBar::handle:vertical {
         background: white;
         min-height: 20px;
     }
     QScrollBar::add-line:vertical {
         border: 2px solid grey;
         background: #32CC99;
         height: 20px;
         subcontrol-position: bottom;
         subcontrol-origin: margin;
     }
    QScrollBar::sub-line:vertical {
         border: 2px solid grey;
         background: #32CC99;
         height: 20px;
         subcontrol-position: top;
         subcontrol-origin: margin;
     }
     QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
         border: 2px solid grey;
         width: 3px;
         height: 3px;
         background: white;
     }
    QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
         background: none;
     }</string>
          </property>
          <property name="widgetResizable">
           <bool>true</bool>
          </property>
          <widget class="QWidget" name="scrollAreaWidgetContents">
           <property name="geometry">
            <rect>
             <x>0</x>
             <y>0</y>
             <width>481</width>
             <height>1024</height>
            </rect>
           </property>
           <property name="styleSheet">
            <string notr="true">QScrollBar:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        height: 15px;
        margin: 0px 20px 0 20px;
    }
    QScrollBar::handle:horizontal {
        background: white;
        min-width: 20px;
    }
    QScrollBar::add-line:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: right;
        subcontrol-origin: margin;
    }
    
    QScrollBar::sub-line:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: left;
        subcontrol-origin: margin;
    }
    
    
    QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
        border: 2px solid grey;
        width: 3px;
        height: 3px;
        background: white;
    }
    
    QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
        background: none;
    }
    
    
    QScrollBar:horizontal {
        border: 2px solid green;
        background: cyan;
        height: 15px;
        margin: 0px 40px 0 0px;
    }
    
    QScrollBar::handle:horizontal {
        background: gray;
        min-width: 20px;
    }
    
    QScrollBar::add-line:horizontal {
        background: blue;
        width: 16px;
        subcontrol-position: right;
        subcontrol-origin: margin;
        border: 2px solid black;
    }
    
    QScrollBar::sub-line:horizontal {
        background: magenta;
        width: 16px;
        subcontrol-position: top right;
        subcontrol-origin: margin;
        border: 2px solid black;
        position: absolute;
        right: 20px;
    }
    
    QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
        width: 3px;
        height: 3px;
        background: pink;
    }
    
    QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
        background: none;
    }</string>
           </property>
           <layout class="QVBoxLayout" name="verticalLayout">
            <item>
             <widget class="QFrame" name="frame">
              <property name="minimumSize">
               <size>
                <width>0</width>
                <height>500</height>
               </size>
              </property>
              <property name="styleSheet">
               <string notr="true">background-color: rgb(255, 53, 161);</string>
              </property>
              <property name="frameShape">
               <enum>QFrame::StyledPanel</enum>
              </property>
              <property name="frameShadow">
               <enum>QFrame::Raised</enum>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QFrame" name="frame_2">
              <property name="minimumSize">
               <size>
                <width>0</width>
                <height>500</height>
               </size>
              </property>
              <property name="styleSheet">
               <string notr="true">background-color: rgb(17, 255, 0);</string>
              </property>
              <property name="frameShape">
               <enum>QFrame::StyledPanel</enum>
              </property>
              <property name="frameShadow">
               <enum>QFrame::Raised</enum>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </widget>
        </item>
       </layout>
      </widget>
     </widget>
     <resources/>
     <connections/>
    </ui>
    

    And this is the Python code that I use to open it:

    from PyQt5 import QtWidgets, uic
    
    app = QtWidgets.QApplication([])
    telaDeLogin = uic.loadUi('testedotestedoteste.ui')
    telaDeLogin.show()
    app.exec()
    

  • Moderators

    @_jao_victor_ said in I can't style my widgets:

    This is the XML code of the screen that I used as an example:

    You have applied global stylesheets to MainWindow and centralwidget ("background-color: rgb(255, 255, 255);") -- I believe these get inherited by your QScrollBar. Delete them



  • @JKSH Problem solved, thank you very much. But what if I want to make the background of the screen white without changing the color of the scroll bar, how do I do it?


  • Moderators

    @_jao_victor_ said in I can't style my widgets:

    Problem solved, thank you very much.

    You're welcome!

    But what if I want to make the background of the screen white without changing the color of the scroll bar, how do I do it?

    Specify which widgets the style should apply to: QMainWindow { background-color: rgb(0, 255, 255); } This will prevent QScrollBar from inheriting the style.



  • @JKSH Thanks !!!


Log in to reply