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 style can be set in the qss stylesheet for an individual QPushButton by using the QPushButton object name. For example to target the E Stop button use #estop_pb to target the Power button use #power_pb.
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 like forgetting a ; 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 the following Dynamic Property to the QPushButton.
The default flash time is 1000ms it can be changed in the INI file. See Flash Timer for more information on setting the flash time.
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. The [flashing=”True”] must be added to the state that matches the flash_state value.
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.
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.
To make the Power QPushButton flash if not checked and enabledthe flash_state Dynamic Property must be set to unchecked and following example could be used.
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 font size and weight 400 is normal and 700 is bold*/
QLabel {
font-size: 24px;
font-weight: 800;
}
/* 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;
}