Configure portal branding

  • Release version: Australia
  • Updated April 22, 2026
  • 2 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 Configure portal branding

    The Branding Editor in ServiceNow enables you to customize the look and feel of your service portal. Accessible viaService Portal > Service Portal Configuration > Branding Editor, it allows you to select a portal and tailor its theme through intuitive options on theQuick SetupandTheme Colorstabs.

    Show full answer Show less

    Quick Setup

    This tab lets you configure foundational branding elements:

    • Portal Title: Sets the portal name and updates it across the platform UI.
    • Logo: Upload a header logo, automatically scaled to fit within 46 px height and 200 px width.
    • Logo Padding: Adjusts logo placement relative to the header edge, controlled via CSS variables on the portal form.
    • Tag Line & Background: Customize the introductory tag line text and homepage background using JSON schema fields linked to specific portal records.
    • Tag Line Color: Choose the color for the tag line text.
    • Homepage Background Color: Select the background color using standard names, hex, RGB, or palette selection.
    • Background Image: Upload an image to appear behind homepage content, stored in the widget container.

    Theme Colors

    This tab allows detailed color customization for your portal’s appearance, with changes reflected immediately in the theme preview and saved to CSS variables in the portal form:

    • Navbar: Customize colors of the portal header menu.
    • Brand: Adjust page-level colors such as page background and widget backgrounds.
    • Text: Define text colors used on your portal pages.

    Practical Benefits for ServiceNow Customers

    Using the Branding Editor, you can quickly create a consistent and visually appealing portal experience aligned with your organization's identity. The ability to fine-tune logos, colors, tag lines, and backgrounds ensures your portal stands out and provides a tailored user experience. All customizations are stored in CSS variables and portal records, enabling easy updates and maintenance through the platform UI.

    Use Branding Editor to give your portal its own look and feel.

    To access the Branding Editor, navigate to Service Portal > Service Portal Configuration, then select Branding Editor.

    From the portal list, select the portal you want to customize the theme for. Then use the options on the Quick Setup and Theme Colors tabs to customize your portal.

    Figure 1. Branding Editor
    Branding Editor.
    Table 1. Quick Setup tab options
    Field Description
    Portal Title

    The name of your portal. Changing the name of the portal in the Branding Editor also changes the title on the portal form field in the platform UI.
    Logo The logo that appears in the header for your portal. This image is scaled to a maximum height of 46 px and a maximum width of 200 px.
    Logo padding Where you want the logo to sit in relation to the edge of the header. This information is stored in the CSS variables section on the portal form.
    Tag line & background

    Fields defined by the JSON schema in the Quick start config field on the portal record in the platform UI. The sample Service Portal adds Tag Line and Background to the Branding Editor using the following schema:

    [{
	"tagline": {
		"table" : "sp_instance",
		"sys_id" : "34fe3d96cb20020000f8d856634c9cf4",
		"field" : "title"
	},
	"hero_background": {
		"table" : "sp_container",
		"sys_id" : "be98a8d2cb20020000f8d856634c9c63",
		"field" : "background_image"
	}
}]
    Tag line Introduce your users to a portal page with a tag line. This text is stored in an instance of the homepage search widget.
    Tag line color Select a color for the tag line.
    Homepage background color Add a color for your background. You can type in a color name, hex color, decimal (RGB), or select from the color palette.
    Background image Upload an image to appear in the background of your homepage. This image is stored in the container for the widget on your homepage.
    For any colors on the theme tab, you can use the standard color name, hex code, decimal (RGB) code, or select the color from the color palette. All the color definitions are stored in the CSS variables field of the portal form. The theme preview updates as you make changes.
    Table 2. Theme colors tab
    Field Description
    Navbar Use the fields in this section to customize the colors for the header menu.
    Brand Use the fields in this section to customize the page color, for example, the page background or the widget background.
    Text Use the fields in this section to customize the color of the text on a page.

    Changes made to the theme colors in the Branding Editor appear in the CSS variables field of the portal form in the platform UI.