StyleSheet¶
You can use your own .qss style sheet by creating a valid .qss file in the configuration directory and setting it in the INI Settings.
[DISPLAY]
QSS = name_of_file.qss
Note
If a THEME is found in the ini file the QSS entry is ignored
The Qt Style Sheets Reference and the Style Sheet Syntax and the Style Sheet Examples are good references to use when creating your own stylesheets.
Note
If there is an error in the stylesheet syntax, no warning is issued, it is just ignored. So don’t forget the ; at the end of each setting. And do not accidentally use any backslashes it will break the whole file.
Warning
If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value, even if border is set to none.
Rules¶
When multiple rules apply, QSS follows specificity rules similar to CSS. More specific selectors (e.g., those with pseudo-states or object names) take precedence. If specificity is equal, the last rule defined in the stylesheet takes precedence. In this example if a QPushButton state is hover or pressed or disabled the background-color will change.
QPushButton {
background-color: lightgray;
color: black;
border: 1px solid gray;
padding: 5px;
}
QPushButton:hover {
background-color: lightblue;
color: white;
}
QPushButton:pressed {
background-color: darkblue;
border-style: inset;
}
QPushButton:disabled {
background-color: #cccccc;
color: #666666;
}
Colors¶
Most colors can be specified using Hex, RGB or RGBA color model. RGB is Red, Green, Blue and A means Alpha or transparency. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). Hex is red, green blue in hexadecimal number pairs from 00 to ff.
#0000ff
rgb(0, 0, 255) Blue
rgba(0, 0, 255, 25%) Light Blue
Controls¶
The E Stop and Power button styles are set in the qss stylesheet. To target the Estop button use #estop_pb to target the Power button use #power_pb.
Example
QPushButton#estop_pb {
font-size: 24px;
font-weight: 700;
background-color: yellow;
border-style: outset;
border-width: 5;
border-color: red;
border-radius: 10;
}
QPushButton#estop_pb:checked {
color: white;
background-color: red;
border-style: inset;
border-color: yellow;
}
QPushButton#power_pb {
font-size: 24px;
font-weight: 800;
background-color: red;
border-style: outset;
border-width: 5;
border-color: green;
border-radius: 10;
}
QPushButton#power_pb:checked {
color: white;
background-color: green;
border-style: inset;
border-color: black;
}
To make a font bold use the font-weight, 400 is normal and 700 is bold.
Warning
Any errors will make the rest of the stylesheet not apply.
Flashing¶
Checkable buttons, like estop_pb, power_pb, or hal_buttons that are checkable can flash when either checked or not checked. To add flashing add one String type Dynamic Property to the QPushButton.
Property Type |
Property Name |
Pin Value |
String |
flash_state |
checked or unchecked |
When the button checked state matches the flash_state value, the button will flash between the normal background-color and the checked or !checked (not checked) background-color.
To make the E Stop QPushButton flash when not checked the flash_state Dynamic Property must be set to unchecked and following example could be used.
Example
QPushButton#estop_pb {
font-size: 12px;
font-weight: 700;
background-color: yellow;
border-style: outset;
border-width: 2;
border-color: red;
border-radius: 5;
}
QPushButton#estop_pb:checked {
color: white;
background-color: red;
border-style: inset;
border-color: yellow;
}
QPushButton#estop_pb:!checked[flashing="True"] {
background-color: red;
}
In the above example the E Stop push button will flash if not checked.
In this example the Power push button will flash if not checked and enabled.
QPushButton#power_pb {
font-size: 12px;
font-weight: 700;
background-color: yellow;
border-style: outset;
border-width: 2;
border-color: red;
border-radius: 5;
}
QPushButton#power_pb:checked {
color: white;
background-color: red;
border-style: inset;
border-color: yellow;
}
QPushButton#power_pb:!checked:enabled[flashing="True"] {
background-color: red;
}
Examples¶
/* Set the background color for all QPushButtons, border is required * /
QPushButton {
background-color: rgba(224, 224, 224, 50%);
border: 1px;
}
/* Set the background color and style for all QPushButtons when Pressed * /
QPushButton:pressed {
background-color: rgba(192, 192, 192, 100%);
border-style: inset;
}
/* Set settings for a QPushButton named exit_pb * /
QPushButton#exit_pb {
border: none;
background-color: rgba(0, 0, 0, 0);
}
/* Using sub controls * /
QAbstractSpinBox::up-button {
min-width: 30px;
}
/* Combining sub controls and state * /
QTabBar::tab:selected {
background: lightgray;
}
/* Target by Object Name starts with something common*/
QLabel[objectName*="dro"] {
font-family: Courier;
font-size: 14pt;
font-weight: 700;
}