Skip to main content
Light Dark System


Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css and Shoelace styles

Some handy excerpts:

Global CSS variables

:root {
	--primary-background-color: #4177a2;
	--highlight-background-color: rgba(153, 204, 255, .4);

	--label-color: #000000;
	/* For fixed width labels - use class 'et2-label-fixed'*/
	--label-width: 8em;

	--input-border-color: #E6E6E6;
	--input-text-color: #26537C;

	--warning-color: rgba(255, 204, 0, .5);
	--error-color: rgba(204, 0, 51, .5);


Use these variables instead of specific colors to make maintenance and customisation easier. In most places, we can use Shoelace’s design tokens as well

customStyle customStyle + warning
.customStyle {
    background-color: var(--primary-background-color, white);
    border: 1px solid var(--input-border-color);
    color: var(--label-color);
    /* Shoelace gives us many variables as well */
    padding: var(--sl-spacing-medium);

.customStyle.warning {
    /* Local override of the label color */
    --label-color: red;
    background-color: var(--warning-color);
    border-width: 2px;

<et2-box class="customStyle">customStyle</et2-box>
<et2-box class="customStyle warning">customStyle + warning</et2-box>

Useful CSS classes


Hides the element using cssdisplay: none


Hides the element using cssdisplay: none !important;


Use on a widget to force its label to have a fixed width. This helps line up labels and widgets into columns without having to use a grid, which allows them to reflow if needed. Set the CSS variable --label_width to change how much space the labels get.

These widgets are in an et2-vbox:

fixed label example #1
Without et2-label-fixed class
fixed label example #2
Fixed width labels using et2-label-fixed
fixed label example #3
–label_width CSS variable changed for more space
Note how ‘Responsible’ widget wraps

Directly Customising Widgets

If you need to customise an individual widget further, you can use CSS Parts or Custom Properties to directly override the widget’s internal styling.


Custom Button Color

Custom button
<et2-button class="tomato-button">Custom button</et2-button>
  .tomato-button::part(base) {
    background: var(--sl-color-neutral-0);
    border: solid 1px tomato;

  .tomato-button::part(base):hover {
    background: rgba(255, 99, 71, 0.1);

  .tomato-button::part(base):active {
    background: rgba(255, 99, 71, 0.2);

  .tomato-button::part(base):focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);

  .tomato-button::part(label) {
    color: tomato;

Fixed width labels

Here we’ve used the class et2-label-fixed and overridden the standard width of 8em to --label-width: 16em;. Adjust the viewport width to see the widgets reflow when there’s not enough horizontal space. No grid is used, which allows the reflow from 2 columns to 1 column.

.fixed-example {
    --label-width: 16em;
<et2-select class="fixed-example et2-label-fixed" label="Select"></et2-select>
<et2-select-number class="fixed-example et2-label-fixed" label="Select number from list"></et2-select-number>