Create a portal theme

  • Release version: Zurich
  • Updated July 31, 2025
  • 3 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Create a portal theme

    This guide explains how to create a custom portal theme in ServiceNow when more customization is needed beyond the Branding Editor. Custom themes require CSS knowledge and enable you to define the visual style and behavior of your Service Portal by associating headers, footers, CSS, and JavaScript includes with the theme.

    Show full answer Show less

    Creating a Custom Theme

    To create a theme, navigate to Service Portal > Themes and select New. Fill out the form fields and save the record. The theme name is used internally to associate it with a portal and is not visible to end users.

    Key theme settings include:

    • Turn off SCSS compilation: Allows sending plain CSS directly, bypassing SCSS compilation.
    • Application: Defines the application scope to ensure consistency across header, footer, and theme.
    • Header/Footer: Select headers and footers from the spheaderfooter table, which are configurable widgets.
    • Fixed header/footer: Optionally lock header or footer to top or bottom of the page during scrolling.
    • CSS variables: Define CSS custom properties to control colors and styles consistently.

    Note: Use the CSS variables field exclusively for CSS custom properties; define CSS rules and styles separately in CSS Includes.

    Adding CSS Includes

    CSS Includes let you add internal or external style sheets to the theme for richer styling:

    • Name and Application: Identify the CSS Include and maintain consistent application scope.
    • Source options:
      • Internal Style Sheet uploaded to the spcss table (standard CSS or SCSS/LESS since Madrid release).
      • URL: Link to an external CSS file, useful for corporate or shared styles.
    • Lazy Load: Option to load CSS asynchronously to improve page load times, though it should be consistently enabled or disabled across all CSS Includes for the theme. Not recommended if your portal experiences unstyled content flashing.
    • RTL CSS file URL: Support for right-to-left languages by specifying an alternate stylesheet URL for languages like Hebrew.

    Adding JavaScript Includes

    You can also associate JavaScript files with the theme to provide client-side functionalities:

    • Display name and Application: Name the JS Include and ensure application scope matches the theme.
    • Source options:
      • UI Script: Internal JavaScript uploaded as UI scripts for reuse across the platform.
      • URL: Link to external JavaScript files, for example, corporate scripts or third-party resources.
    • Other fields: Track the last updated date and associated Service Portal package for the JS Include.

    Practical Implications for ServiceNow Customers

    Creating a custom portal theme allows you to tailor the Service Portal appearance and behavior precisely to your organizational branding and functional requirements. By using CSS variables, CSS Includes, and JavaScript Includes effectively, you can maintain consistent styling, enable responsive designs, and enhance user experience with dynamic client-side behavior. Ensuring matching application scopes across theme components helps maintain integrity and avoids conflicts.

    This approach is best suited for administrators or developers with CSS and JavaScript expertise who require advanced customization beyond the capabilities of the Branding Editor.

    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 select New.
    2. Complete the form fields and then from the form context menu, 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.
      Turn off SCSS compilation Turns off compiling SCSS and sends the plain CSS file directly to the client.
      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;
      Note:
      Use the CSS variables field to define CSS variables only. Use CSS Includes to define CSS rules. As of the Madrid release, Sass and LESS can be used within CSS Includes.
    3. To add a style sheet to the theme, in the CSS Include related list, select New.
    4. Complete the style sheet form fields and select Submit.
      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 An internal style sheet to associate with the theme.
      CSS file URL A URL to an external style sheet to associate with the theme.
      Lazy Load

      Option to load the CSS Include asynchronously to improve page load time. This option should be set to the same value for all CSS Includes of a theme. Enabling asynchronous loading for only some CSS Includes associated with a theme isn’t recommended.

      Note:
      Enabling Lazy Load isn’t recommended for portals with flashing of unstyled content.

      The CSS Includes with Lazy Load enabled are listed in the Lazy load CSS includes related list in the theme record.
      RTL CSS file URL

      A URL to an external style sheet for mirroring the direction of a portal when the session language is a right-to-left language, such as Hebrew.

      For information about support for right-to-left languages, see Styling for right-to-left languages in portals.
    5. To add a JavaScript include to the theme, in the JS Include related list, select New.
    6. Complete the JS Include form fields and select Submit.
      Table 3. JS Include form fields
      Field Description
      Display name Name of the JS Include. Remember this name to associate the JS 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 JS file URL Associate an internal UI script or JavaScript 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 field is populated by default.