---
title: "Create a theme"
slug: "create-a-theme"
abstract: "How to create a theme."
---
# 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](https://doc.sitecore.com/ch/en/users/content-hub/user-group-policies.html "User group policies").

To create a theme:

1. Click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Themes**.
3. On the **Themes** page, click :mdiPlus: 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:

```css
.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.