Styling#
Edfice supports Qt Widget Style Sheet Syntax.
The style
prop of every QtWidgetElement
is
a dictionary of style properties.
The keys of the style
dictionary are the style name, and the values
are usually either strings or numbers.
For example, if you want to make a label with 10px margins, with red text in a 16pt font on a beige semi-transparent background:
Label(
"Red text",
style={
"margin": 10,
"color": "red",
"font-size": 16,
"background-color": "rgba(245, 245, 220, 100)"
})
All style properties supported by Qt will also work with Edifice. See Qt Stylesheet Reference List of Properties.
Note that sometimes Qt styling behaves differently from CSS styling (despite similar syntax and naming) and is not supported by all Widgets.
Currently, the following styles are tested to be supported.
Widget Styling#
Widgets follow the Qt Style Sheet Box Model.
color: See Color.
font-size: Font size in points.
font-weight: A number indicating how bold the font should be.
font-family: Font family name.
font-style: Font style, i.e.
"italic"
.background-color: See Color.
margin: Exterior margin in pixels.
margin-left, margin-right, margin-top, margin-bottom: Exterior margin in pixels.
padding: Interior padding in pixels.
padding-left, padding-right, padding-top, padding-bottom: Interior padding in pixels.
border: For example
"1px solid red"
border-left, border-right, border-top, border-bottom: For example
"1px solid red"
border-width: Border width in pixels.
border-left-width, border-right-width, border-top-width, border-bottom-width: Border width in pixels.
border-style: Border style.
border-left-style, border-right-style, border-top-style, border-bottom-style: Border style.
border-color: Border color. See Color.
border-left-color, border-right-color, border-top-color, border-bottom-color: Border color.
border-radius: Border corner radius in pixels.
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius: Border corner radius in pixels.
height, width: Height/width in pixels.
min-height, max-height, min-width, max-width: Min/max height/width in pixels.
align:
str | AlignmentFlag
One of"left
,"right"
,"top"
,"bottom"
,"center"
,"justify"
. Or an AlignmentFlag.top, left (but not bottom, right): Position offset in pixels from a
FixView
.
Layout View Styling#
Every Layout Base Element named View
has an underlying
QLayout
and follows slightly different rules than the
Qt Style Sheet Box Model.
Note
There is no margin
style for Layout View
Elements.
Note
The padding of a View
includes the border, so
if you want a 2px border around the View
then you should also
set at least 2px of padding so that the content does not obscure the border.
background-color: See Color.
padding: Interior padding in pixels.
padding-left, padding-right, padding-top, padding-bottom: Interior padding in pixels.
border: For example
"1px solid red"
border-left, border-right, border-top, border-bottom: For example
"1px solid red"
border-width: Border width in pixels.
border-left-width, border-right-width, border-top-width, border-bottom-width: Border width in pixels.
border-style: Border style.
border-left-style, border-right-style, border-top-style, border-bottom-style: Border style.
border-color: Border color. See Color.
border-left-color, border-right-color, border-top-color, border-bottom-color: Border color.
border-radius: Border corner radius in pixels.
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius: Border corner radius in pixels.
height, width: Height/width in pixels.
min-height, max-height, min-width, max-width: Min/max height/width in pixels.
align: One of
"left
,"right"
,"top"
,"bottom"
,"center"
,"justify"
.align:
str | AlignmentFlag
One of"left
,"right"
,"top"
,"bottom"
,"center"
,"justify"
. Or an AlignmentFlag.top, left (but not bottom, right): Position offset in pixels from a
FixView
.
Size Policy#
The size_policy
prop of QtWidgetElement
is also
sometimes useful for controlling the Qt layout behavior.
Color#
There are two ways to specify a style value which takes a single color:
A
str
with any of the formats allowed by QColor.fromString, for example:"rgba(red, green, blue, alpha)"
decimal range 0—255Named colors like
"red"
Hexadecimal
"#rrggbb"
Hexadecimal
"#aarrggbb"
A QColor.
Style Merging#
If you want to make all Labels
be red but have labels of different
font sizes, you can create a common style dict for shared styles…
LABEL_STYLE = {
"color": "red"
"font-size": 12, # Default font size
"background-color": "rgba(245, 245, 220, 100)",
}
…and adjust the common style dict with |
, the
Python dictionary merge operator.
with VBoxView():
Label("foo", style=LABEL_STYLE | {"font-size": 16})
Label("foo", style=LABEL_STYLE)
Label("foo", style=LABEL_STYLE | {"font-size": 8})
Style Advice#
Set global application styles in a root Element
use_state
initializer function.
For more information see App
.
If you think that Qt’s default color palette has weird choices, you can try
the Edifice color palettes
palette_edifice_light
and
palette_edifice_dark
.
See theme_is_light
for instructions
on how to use them.