Create a theme

Note

To configure Content Hub, you must either be a superuser or have the necessary permissions granted to you through user group policies.

To create a theme:

  1. Click Manage cog icon.

  2. On the Manage page, click Themes.

  3. On the Themes page, click plus sign Theme.

  4. In the Theme dialog, 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 looks like when you apply the selected options. Theme elements include custom headings, button colors, styles, text case, and fonts. Theme settings support three font types:

    Font

    Description

    Default

    Selects the Sitecore Content Hub font (Open Sans).

    Google font

    Selects a font from the list of available Google fonts.

    Custom

    Applies a custom font. To use this font type, you must place a font declaration in the CSS tab, select the Custom font type, and then insert the font family name in the text area.

  6. Click Save.

Note

Content Hub applies your changes when they are saved. If the theme update fails, Content Hub loads the last theme used.

Custom CSS

You can override individual style aspects of your portal pages by customizing the contents of the CSS tab. For example, you can change the default padding, margins, and other HTML attributes.

You can modify the style of the Improvements banner using a special style class named improvements-banner in Knockout and ch-improvements-banner in React. If you have modified the height of your navigation menu, you’ll need to adjust the position of the Improvements banner accordingly, as shown in the following example for Knockout:

RequestResponse
  .improvements-banner {
   top: 75px !important;
  }
Important

If you only want to apply the CSS modifications to a specific page, you should use the CSS tab in that page. This will override the general CSS for that specific page. 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.

Warning

Migrating Content Hub to React-based versions might affect previously implemented customizations. In this particular situation, we recommend that you only use CSS customization as a last resort.

Do you have some feedback for us?

If you have suggestions for improving this article,