Defining portal styles › Configuring Service Portal › Service Portal › Configure UIs and portals › Configure user experiences

Release: Australia · Updated: 2026-04-22 · Official documentation · View source

Configure portal branding

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.

Image omitted: BrandEditor.png
Branding Editor.

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.

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.

Parent Topic:Defining portal styles