Use Branding Editor to give your
portal its own look and feel.
To access the Branding Editor, navigate to Branding Editor.
, then click
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.
Table 1. Quick Setup tab options
||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.
||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.
||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
"table" : "sp_instance",
"sys_id" : "34fe3d96cb20020000f8d856634c9cf4",
"field" : "title"
"table" : "sp_container",
"sys_id" : "be98a8d2cb20020000f8d856634c9c63",
"field" : "background_image"
||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
(r,g,b), or select from the color palate.
||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 (r,g,b)
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
||Use the fields in this section to customize the colors for the header menu
||Use the fields in this section to customize the page colors. For example, the page
background or the widget background.
||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.