logo
logo

Themes

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

Theme configuration

The theme tool allows you to create theme templates for other users.

To create a new theme:

  1. On the menu bar, click Manage .
  2. On the Manage page, click Themes.
  3. On the Themes page, click + Theme.
  4. In the Theme dialog box, enter a name for the new theme and click Save.
  5. On the Theme Management page, customize the theme.

    In the real-time preview, you can see what the web page will look like when the selected options are applied. Theme elements include heading, button colors, and styles, along with text case and custom fonts.

    Theme settings support three font types:

    • Default - selects the Sitecore Content Hub font (Open Sans).
    • Google font - selects a font from the available Google fonts.
    • Custom font - applies a custom font. For this font type to be applicable, you need to place a font declaration in the CSS tab, then select the font option Custom in the settings section, and insert the font family name in the text area.

Note

Themes can update dynamically even if they are in use. When you modify a theme, you must regenerate it. If the theme regeneration fails, Content Hub loads the last successfully generated theme.

Important

When you create a theme, avoid using spaces in the name. For example, use "My-Theme" or "MyTheme". However, if you want to reference a theme name that does include spaces, replace those spaces in the reference with hyphens. Also, if you want to customize the theme font, make sure you use a public link.

Theme overview

The Themes page is visible to all superusers. From this page, you can perform the following actions:

  • Publish - makes your theme available to all users when you turn the switch to On.
  • 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. 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

    In cases where users have applied the now deleted theme, a default theme is applied instead.

Custom CSS

The CSS tab provides extra flexibility to the layout of the portal pages. For example, you can override the default CSS padding, margins, color saturation, and other HTML attributes.

If you only want to apply the CSS modifications to the HTML elements of a specific page, you should use the CSS tab in the portal page.

Warning

CSS customization is the responsibility of the user. When migrating Content Hub to React, many changes could affect the previously implemented customizations. You should only resort to CSS customization as the last means to customize Content Hub.

Can we improve this article ? Provide feedback