Styling the Portal Header with Custom Themes

Last Updated: 12/03/2015 Introduced in Verision: 2.0

Custom themes can be used to restyle the portal header and other visual elements within the system. To create a custom theme, navigate to System > Themes, select the Create new theme action and, in the resulting pop-up, define the theme’s name and the existing theme which should serve as a template for the new theme.

Example

In our example, we will re-color the portal header from blue to purple by creating a new theme which we will call “Purple”.

firstScreen

 

We will begin by navigating to System > Themes and selecting the Create new theme button.

createNewTheme

 

In the resulting Create new theme pop-up, we will name our new theme “Purple” and select DarkBlue in the Copy from dropdown.

nameTheme

 

Our new theme – Purple – will appear in our list of themes. To adjust the colors of our theme, we will select Purple and select the Edit Theme action.

editTheme

 

In the resulting Theme editor popup, we will select the Brushes tab. In the Control tree, we will select Portal > Toolbar. In the right-side of the pop-up, we will see a list of the colors being used by the Portal’s toolbar. To change the background, we will select Back. The color will appear under the list. We will select it and select the action Edit to change this color.

themeEditor

 

In the resulting Edit Color pop-up, we will select a light-purple color and click OK.

pickColor

 

In much the same way, we will change Border to a lighter purple. This completes our changes, so we will click the Save button.

editBorder

 

Back in our list of themes, we will select Purple and select Set As Default.

setAsDefault

 

We will confirm that Purple should be the new default theme.

confirmThemeChange

 

When we reload the portal, we will see that the header color has changed to the light purple that we defined in the Purple theme.

themeApplied

 

Additional Resources