Styling#

Edfice supports Qt Widget Style Sheet Syntax.

The style prop of every Base Element 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.

Content Base Element Styling#

Content Base Elements follow the Qt Style Sheet Box Model.

The following style properties are tested to be supported.

color: str | QColor (See Color) Text color.
font-size: str | int | float Font size.
font-weight: str | int | float Font weight.
font-family: str Font family name.
font-style: str Font style, i.e. "italic".
background-color: str | QColor (See Color) Background color.
margin: int | float Exterior margin in pixels.
- margin-left, margin-right, margin-top, margin-bottom: int | float Exterior margin in pixels.
padding: int | float Interior padding in pixels.
- padding-left, padding-right, padding-top, padding-bottom: int | float Interior padding in pixels.
border: str For example "1px solid red"
- border-left, border-right, border-top, border-bottom: str For example "1px solid red"
- border-width: int | float Border width in pixels.
  - border-left-width, border-right-width, border-top-width, border-bottom-width: int | float Border width in pixels.
- border-style: str Border style.
  - border-left-style, border-right-style, border-top-style, border-bottom-style: str Border style.
- border-color: str | QColor (See Color) Border color.
  - border-left-color, border-right-color, border-top-color, border-bottom-color: str | QColor (See Color) Border color.
- border-radius: int | float Border corner radius in pixels.
  - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius: int | float Border corner radius in pixels.
height, width: int | float Height/width in pixels.
min-height, max-height, min-width, max-width: int | float 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): int | float Position offset in pixels from a FixView.

Layout Base Element Styling#

Every Layout Base Element 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.

The following style properties are tested to be supported.

background-color: str | QColor (See Color) Background color.
padding: int | float Interior padding in pixels.
- padding-left, padding-right, padding-top, padding-bottom: int | float Interior padding in pixels.
border: str For example "1px solid red"
- border-left, border-right, border-top, border-bottom: str For example "1px solid red"
- border-width: int | float Border width in pixels.
  - border-left-width, border-right-width, border-top-width, border-bottom-width: int | float Border width in pixels.
- border-style: str Border style.
  - border-left-style, border-right-style, border-top-style, border-bottom-style: str Border style.
- border-color: str | QColor (See Color) Border color.
  - border-left-color, border-right-color, border-top-color, border-bottom-color: str | QColor Border color.
- border-radius: int | float Border corner radius in pixels.
  - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius: int | float Border corner radius in pixels.
height, width: int | float Height/width in pixels.
min-height, max-height, min-width, max-width: int | float 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): int | float Position offset in pixels from a FixView.

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–255
- Named colors like "red"
- Hexadecimal "#rrggbb"
- Hexadecimal "#aarrggbb"
A QColor.

Graphics Effects#

Edifice styles support the four stock QGraphicsEffect effects for any Base Element.

Each effect style has a different set of parameters.

blur: float The blur radius in pixels.

See QGraphicsBlurEffect.
drop-shadow: tuple[float, QColor, QPointF]
- float The blur radius in pixels.
- QColor Shadow color.
- QPointF Shadow offset.
Example drop-shadow#
```
 style = {
     "drop-shadow": (10.0, QColor("black"), QPointF(-1.0, 5.0)),
 },
```
See QGraphicsDropShadowEffect.
colorize: tuple[QColor, float]
- QColor Tint color.
- float The strength of the colorization.
See QGraphicsColorizeEffect.
opacity: float The opacity of the widget.

See QGraphicsOpacityEffect.

Note

Due to limitations in the Qt API, only one graphic effect can be applied to a Base Element at a time.

Size Policy#

The size_policy prop of QtWidgetElement is also sometimes useful for controlling the Qt layout behavior.

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})

Global Style#

Set global application styles in a root Element use_memo 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.