Editing a Theme

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

The portal theme sets the appearance of colors, gradients, fonts, and images in the portal. It can also set default settings for the portal’s mobile app and other devices.

Many themes are included with the platform by default and any theme can be edited.

To edit a theme, navigate to System > Themes, select a theme, and select Edit Theme from the entity actions menu to access the Theme editor.

The Theme editor contains six tabs.

The Brushes tab allows you to change the color of every control, such as a date picker or a button, and set colors for each folder to further customize the portal appearance. On the Colors tab and the Gradients tab, view and edit the colors available on the Brushes tab. Change the fonts and styles for every component’s label on the Fonts tab. Use the Images tab to set images for buttons, backgrounds and panels. The Devices tab allows you to manage settings for your desktop, mobile device, and other devices.

If you make changes to the current portal theme, you will be prompted to refresh the portal. The portal will then update, and the changes will be visible to all users.

If you edit a theme that is not in use, you must change the portal theme to the updated theme to see the changes.

Example

In the example, we will change the color of the title bar background in the DarkBlue theme to pink.

settingApplied

 

To begin, navigate to the folder System > Themes. To edit the current theme, select it in the folder data panel, and click Edit Theme.

editTheme

 

In the Theme editor, tabs organize the types of changes we can make to this theme.

This example focuses on the Brushes tab.

brushesTab

 

 Expand each category to see the controls to edit. 

expandEachCategory

 

 Locate the control to change by entering “norm” in the Control field, and pressing the Enter key. 

searchForNorm

 
Select the Normal control. In the list on the right, select TitleBarBack.
Click the square with the gradient at the bottom of the pop-up, and select Edit from the menu. 
 editTitleBarBack
 
Change the gradient to a solid color by setting both colors in the gradient to the same color.
In the Edit Gradient pop-up, click the first color square, which opens the Color Picker. 

 

pickColor 

Select a color in the Color Picker and click OK.

colorPickedForFirstColor

 

Back in the Edit Gradient pop-up, select the second blue square . . .

clickSecondColor

 

. . . change the color in the Color Picker and click OK.

pickSecondColor

 

To save the changes to the color, click Save in the Edit Gradient pop-up.

saveColor

 
Back in the Theme editor, click Save to save the changes to the TitleBarBack control
Click Yes to confirm the update.
refreshPortal
 

Once the portal refreshes, we can see the update.

 

 settingApplied

 


 

Additional Resources