Create a portal theme

If you need more customization than Branding Editor can provide, you can create your own custom theme.

Only users with an understanding of CSS should create custom themes.

  1. Navigate to Service Portal > Themes, then click New.

    Blank theme form

  2. Complete the form fields and select Save.
    Table 1. Theme form fields
    Field Description
    Name Name of your theme. Use this name to associate the theme with your portal. This name is not visible to users, you should know it to apply the correct theme to a portal.
    Application

    The record scope. The header menu record and the source table must have the same application scope.

    Header List of headers and footers from the sp_header_footer table that you can associate with a portal theme. Headers and footers are widgets and can be configured the same way.
    Footer List of headers and footers from the sp_header_footer table that you can associate with a portal theme.
    Fixed header Locks the header at the top of the page so that when a user scrolls the header remains on the screen.
    Fixed footer Locks the footer at the bottom of the page so that when a user scrolls the footer remains on the screen.
    CSS variables CSS custom properties that you can use to change the color and styles in a portal. For example, the stock theme uses some of the following variables:
    $sp-logo-margin-x: 		15px !default;
    $sp-tagline-color:		$text-color !default;
    $navbar-inverse-bg: 	#3a3f51 !default;
  3. To add a style sheet to the theme, in the CSS Include related list, click New.
    Figure 1. CSS include record
    Blank CSS include record
  4. Complete the style sheet form fields, the click Save.
    Table 2. Style sheet form fields
    Field Description
    Name Name of the CSS Include. Remember this name to associate the CSS Include with the theme.
    Application The record scope. The header menu record and the source table must have the same application scope.
    Source Select one of the following options:
    • Style Sheet: Add an internal style sheet that has been uploaded to the CSS table [sp_css]. For example, ng-sortable.min.css. Internal style sheets use standard CSS in the CSS field.
    • URL: Link to an external style sheet. Use external style sheets to use the same CSS as a corporate website or other online resource.
    Style sheet Associate a style sheet or CSS file URL, depending on which option you select in the Source field.
  5. To add a JavaScript include to the theme, in the JS Include related list, click New.
    Figure 2. CSS include record
    Blank CSS include record
  6. Complete the style sheet form fields.
    Table 3. Style sheet form fields
    Field Description
    Display name Name of the CSS Include. Remember this name to associate the CSS Include with the theme.
    Application The record scope. The header menu record and the source table must have the same application scope.
    Source Select one of the following options:
    • UI Script: Add an internal UI script that has been uploaded to the UI script table [sys_ui_script]. UI scripts allow you to create client-side JavaScript and reuse it in multiple locations. For more information on UI scripts, see UI scripts.
    • URL: Link to an external JavaScript file. Use external URLs to use the same JavaScript as a corporate website or other online resource.
    UI Script or Java file URL Associate an internal UI script or Java file URL, depending on which option you select in the Source field.
    Updated Date and time that the JS Include was last updated
    Package The Service Portal package that the JS include is associated with. For example, Service Portal Configuration Pages. This fields is populated by default.