Configure portal branding

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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 allows you to customize the look and feel of your service portal. It enables you to tailor the portal’s appearance to align with your organization’s branding by adjusting titles, logos, colors, backgrounds, and other visual elements.

    Show full answer Show less

    Access the Branding Editor by navigating to Service Portal > Service Portal Configuration and selecting Branding Editor. Then choose the portal you want to customize from the portal list.

    Quick Setup

    The Quick Setup tab provides essential fields to define core branding elements:

    • Portal Title: Sets the portal’s name, which also updates the title on the portal form in the platform UI.
    • Logo: Upload a logo displayed in the portal header, scaled to a max height of 46 px and width of 200 px.
    • Logo Padding: Adjust the logo’s position relative to the header edge, stored as CSS variables on the portal form.
    • Tag Line & Background: Define custom tag lines and background images/colors via a JSON schema linked to portal records. The tag line introduces users to the portal page, and its text is stored in the homepage search widget instance.
    • Tag Line Color, Homepage Background Color, Background Image: Customize these visual elements using color names, hex codes, RGB values, or image uploads. Background images are stored within the homepage widget container.

    Theme Colors

    The Theme Colors tab lets you fine-tune color schemes across the portal, with sections for:

    • Navbar: Customize the header menu colors.
    • Brand: Adjust page background and widget background colors.
    • Text: Set the color for page text.

    All color changes made here are saved as CSS variables on the portal form, and the theme preview updates live as you make adjustments, enabling you to see changes immediately.

    Key Outcomes

    • Create a visually consistent and branded service portal that matches your organization's identity.
    • Quickly update portal titles, logos, and tag lines to reflect current branding needs.
    • Easily customize colors and backgrounds for headers, pages, and text using intuitive controls.
    • View real-time previews of branding changes before applying them to your portal.

    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 click Branding Editor.

    Select the portal you want to customize the theme for from the portal list. 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 location 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 palate.
    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 palate. All the color definitions are stored in the CSS variables field of the portal form. The theme preview updates in real time 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 colors. 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.