---
sourceDocument: Brazil ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/platform-user-interface

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Configure portal branding

# Configure portal branding {#ariaid-title1}

Release version: Brazil  
Updated September 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) 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's Service Portal enables you to customize the visual identity of your portal, giving it a unique look and feel that aligns with your organization's branding.
Accessible viaService Portal \> Service Portal Configuration \> Branding Editor, this tool allows you to modify themes, colors, logos, and other design elements easily.
Show full answer Show less  

## Quick Setup

Within the Branding Editor, the Quick Setup tab lets you configure key portal elements:

* **Portal Title:** Sets the portal's name, which also updates the platform UI's portal form title.
* **Logo:** Upload a header logo image, automatically scaled to fit within 46 px height and 200 px width.
* **Logo Padding:** Adjust the logo's position relative to the header edge, stored as CSS variables.
* **Tag Line \& Background:** Define a welcoming tagline and background image or color for the homepage using JSON schema configurations linked to specific portal records.
* **Tag Line Color:** Customize the color of the tagline text.
* **Homepage Background Color and Image:** Set a solid color or upload a background image for the homepage container.

These settings directly update corresponding fields on the portal form and use CSS variables for styling control. Color inputs accept standard color names, hex codes, or RGB values.

## Theme Colors

The Theme Colors tab offers detailed control over the portal's palette, organized into three key areas:

* **Navbar:** Customize header menu colors to match your branding.
* **Brand:** Modify page and widget background colors.
* **Text:** Set text colors across portal pages for readability and consistency.

Changes made here are reflected in real time in the theme preview and stored as CSS variables in the portal form, ensuring consistent application across the portal.

## Practical Benefits

Using the Branding Editor, ServiceNow customers can:

* Quickly tailor portals to reflect their corporate identity without coding.
* Ensure consistent styling through centralized CSS variable management.
* Preview design changes live, facilitating efficient iteration and approval.
* Enhance user engagement by creating visually appealing and intuitive portal experiences.  
Use Branding Editor to give your
portal its own look and feel.

To access the Branding Editor, navigate to Service PortalService 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  
{#c_BrandingEditor__table_bq1_v4h_2z__entry__2}

| 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. |
[Table 1. Quick Setup tab options]

{#c_BrandingEditor__table_bq1_v4h_2z}  
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. {#c_BrandingEditor__table_bsg_hd3_2z__entry__2}

| 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. |
[Table 2. Theme colors tab]

{#c_BrandingEditor__table_bsg_hd3_2z}

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

*[\>]: and then