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. You can use Bootstrap CSS Helper Classes with any Service Portal field that accepts CSS as a value. To show or hide Service Portal containers, use Bootstrap CSS Responsive Utilities Helper Classes such as visible-lg or hidden-md.

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.

Branding editor UI, showing the Quick Setup tab and Theme Preview.

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.

CSS classes

You can define CSS classes elements on the page within each respective record.

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.

Note: In some cases, default styles for accessibility might overwrite the CSS defined for a portal.
Figure 1. Hierarchy of style application in the Service Portal
Diagram showing Service Portal CSS overrides