I can't style my widgets

_jao_victor_

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?

JKSH

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.

_jao_victor_

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.

SGaist

Hi and welcome to devnet,

Are you using PyQt5 ? PySide2 ? PySide6 ?

JKSH

@_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.

_jao_victor_

@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":

When I run with Python:

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

_jao_victor_

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

SGaist

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

_jao_victor_

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

JKSH

@_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

_jao_victor_

@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?

JKSH

@_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.

_jao_victor_

@JKSH Thanks !!!