Objective: To create a custom theme and apply it to a Service Portal to further modify the portal style.
Creating a theme takes our styles one step further and brings our portal closer to compliance with a corporate style guide. With just a little SASS and CSS we can take our portal a long way.
In this exercise, we will clone the La Jolla Theme record, modify it’s styles, and apply it to the CodeCreative portal we created in the last exercise.
Follow the below instructions to complete the exercise:
Log in to your Personal Developer Instance
Using the Filter navigator, navigate to Service Portal > Themes (Learn more about the Theme Record)
Open the Theme record with the Name La Jolla
Review the SASS variables used in the CSS variables field (Learn more about the SASS Variables)
Observe the CSS Includes Related List has two records listed
Insert as a new record with the following changes:
- Name: CodeCreative
- CSS variables:
Open the CodeCreative Portal record
Update the record with the following changes:
- Theme: CodeCreative
Open the CodeCreative Service Portal
Observe the current style of the portal
Open the CodeCreative Theme record
Update the record with the following CSS variables:
$btn-default-color: #ffffff !default; $input-border-focus: $brand-primary !default; /* Panels */ $panel-default-border: transparent !default; $panel-default-heading-bg: transparent !default;
Refresh the CodeCreative portal
Observe that the button text is now white and the panel headings have changed
Because of this, Themes should ideally be built in a way that they can be used by any Portal. Highly specific code should be avoided as it can often be located more closely to the point of use.
One of the best uses of Themes is defining reasonable defaults for Bootstrap SCSS Variables and ServiceNow SCSS Variables.
The CSS variables field, similar to the CSS variables field on the Portal record, allows injecting SASS variables into the framework’s stylesheets. Service Portal uses a combination of Bootstrap 3’s SASS Variables in addition to ServiceNow specified SASS variables such as $sp-tagline-color.
By setting these variables in the CSS variables fields, Service Portal Admins and Developers can change quite a bit about their portal without having to touch any CSS classes or ids themselves.
The changes made in this exercise could have been made by manipulating CSS styles directly using element, class, and id selectors. Compared to CSS classes and ids, however, SASS Variable usage is much more stable and less subject to change. Elements, classes, and id selectors have been known to change, sometimes almost arbitrarily, between ServiceNow versions. SASS Variables have proven much more stable and in most cases are the best way to make portal wide changes.
Try these next challenges on your own for further learning:
Do you think you can change the container sizes via the theme? How about giving them fluid widths? Try it and find out.
Can you change the homepage icon bar’s background color using SASS Variables? Which variable does the trick?
Can you find Widget records whose CSS field use variables? Which variables do they use?