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—255

    • Named 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.