Service Portal styles

Pages are made up of containers, columns, rows, widgets, and widget instances. You can configure the CSS of each component, or use the CSS defined in theme and branding as global definitions for the portal. If you do not define CSS in theme or branding, Bootstrap defaults are used.

You can define CSS in your portal at multiple levels.

Bootstrap defaults

If no other CSS is defined, all elements use Bootstrap version 3.3.6 defaults.

Branding editor theme colors/Portal CSS

CSS defined in the Branding Editor Theme Colors tab. Changes made to the theme colors in the Branding Editor appear in the CSS variables field in the portal table [sp_portal].

Customizing the theme colors overwrites the Bootstrap defaults.

Theme CSS

CSS defined in the CSS variables field in the Themes table [sp_theme]. Use the Theme CSS as much as possible to allow for more flexible evolution of your portal in the future.

Using a theme overwrites the Portal CSS/Branding Editor theme colors.

Page CSS

CSS defined in the Page Specific CSS field in the Pages table [sp_page].

Page-specific CSS overwrites the theme CSS.

Container, column, row CSS classes

You can define CSS classes for containers, rows, and columns within each respective record.

Container, column, and row CSS overwrite page-specific CSS.

Widget CSS

CSS defined in the CSS field in the Widgets table [sp_widget].

Widget CSS overwrites container, column, and row CSS.

Widget instance CSS

CSS defined in the CSS field in the Instance table [sp_instance].

Widget instance CSS overwrites all other CSS definitions.

Figure 1. Hierarchy of style application in the Service Portal
Diagram showing Service Portal CSS overrides