Themes

Version: 3.2

Themes define the overall look-and-feel of the application. By creating new themes or modifying the existing themes, the user can change some aspects of the branding including fonts, spacing and colors.

Theme configuration

Users can create a new theme by navigating to the Themes page situated in the Manage menu.

Manage Themes

The first step in creating a new theme is to choose a Theme name.

New theme

Clicking on the Create button redirects the user to the Theme Management page where the different aspects of the theme can be customized.

Theme detail

On the left panel, a live preview demonstrates how the web pages will look like when the selected options were to be applied. Theme elements variate from heading/button colors and heading text cases to custom fonts.

The theme configuration supports 3 font types:

  • Default: Selects the Sitecore Content Hub font (Raleway)
  • Google font: Selects a font from the available Google fonts
  • Custom font: Applies a custom font. For this font type to be applicable, it is required to place a font declaration in the custom CSS tab, then select the font option 'Custom' in the settings section and insert the font family name in the text area.
Custom font settings

The theme tool allows the creation of theme templates, from which other users can choose for their personal use. In order to save a new theme with its specific changes, users need to click on the Save button.

Note

Themes can be dynamically updated, even when they are in use. Every modification to a theme requires it to be regenerated. If the theme generation fails, it loads back the last successful generation.

Theme Overview

The theme overview page is visible to all super-users. All theme managing actions are available on this page.

  • Publish: Makes the theme available to all users
  • Set as default: sets the theme as a default theme for all users. Each user, however, can pick any other published theme on their Profile page by selecting the Change Theme option. Note that this action is only available for enabled themes.
  • Duplicate: creates an identical copy of the selected theme.
  • Rename: Renames the theme.

  • Delete: Deletes the theme from the system.

    Note

    When the deleted theme was applied by users, the default theme will be applied instead.

Theme actions

Custom CSS

The custom CSS tab provides additional flexibility to the layout of the portal pages. For example, users can override the default CSS padding, margins and other HTML attributes.

Custom CSS

If a user wants to only apply the CSS modifications to the HTML elements of a specific page, the custom CSS should be applied in the portal page.

Asset Detail Page

Do you have some feedback for us?

If you have suggestions for improving this article,