Previous Page Next Page

Theming and CSS Customization

Serenity applications are styled with Bootstrap and a set of CSS variables. This page covers the conventions for styling widgets and customizing themes.

The s- Class Convention

Every Serenity widget adds a CSS class to its DOM node based on its type name. The class is generated by getCssClass(), which combines the full type name (dots replaced with dashes), the short type name, and — when the full name starts with a configured root namespace — the name with that namespace stripped, each prefixed with s-.

For example, MySamples.MyCoolWidget produces:

<div id="SomeDiv" class="s-MySamples-MyCoolWidget s-MyCoolWidget">Sample Text</div>

You can style a widget by targeting its s- class:

.s-MyCoolWidget {
    background-color: red;
}

This is how the template styles custom widgets. For example, PermissionCheckEditor.css:

.s-PermissionCheckEditor {
    /* custom styles */
}

Styling Widgets

To add custom styles to a widget:

  1. Create a CSS file next to the widget (e.g. MyWidget.css).
  2. Import it from the widget's module:
import "./MyWidget.css";
  1. Target the widget's s- class:
.s-MyWidget {
    /* styles */
}

CSS Variables

Serenity themes are based on Bootstrap and use CSS variables. The StartSharp premium themes (Azure, Cosmos, Glassy) define variables like --s-card-title, --s-category-title, --s-sidebar-band-bg, etc.

You can create a custom theme by defining or overriding these variables:

:root.theme-mycustomred {
    --s-card-title: #aa2519;
    --s-category-title: #c18e85;
    --s-sidebar-band-bg: #63032f;
    --s-sidebar-band-link: #ffc3b0;
    --s-sidebar-link-active: #d30a0a;
    /* ...other variables copied from the azure light theme */
}

See Premium Themes for details.

Grid Styling

SleekGrid provides CSS classes for grid elements (headers, rows, cells, etc.). The grid's s- class (e.g. s-OrderGrid) can be used to scope grid-specific styles:

.s-OrderGrid .slick-header-column {
    /* header styles */
}

See Also