Home / Design Your Hub / Theme Your Hub

Theme Your Hub

Themes are the main way that you can customize your hub. With themes, anything is possible. If you want to use an out-of-the-box theme with light branding, then you'll be quickly ready to go. If you want to completely customize everything from the ground up, then you have the power to do so.

Themes are designed to feel natural for web developers—this is so you can achieve the best customer experience without needing to learn a new design system. You will see a bit of code if you're customizing your theme, but small changes will be accessible even if you don't code. If you're undertaking a major design for your hub, then you'll want to leverage a developer to make those changes for you. Or reach out to us and we can provide those services for you.

This article goes through every aspect that's important to theming your hub.

Install a New or Existing Theme

From the hub list, select "Theme Management" to access the primary theme screen. This screen has an option to "Installed Packaged Theme." You can choose either a blank theme, or one of our purpose-built starter themes.

The Cardigan theme is a help-center focused theme that we use on our own hub.

After you click "Install" on the theme, it's not yet activated. The "Your Themes" list will show the new theme, with a "Make Live" option next to the new theme. This gives you a chance to preview, customize, and QA the theme before you make it live.

Customize Your Templates

From the Theme Management page, you can select "Code Editor" to customize your theme. When you enter the editor, it will be for the specific theme that you selected. Each theme is separate from the others, so your changes to one theme won't affect others.

The Code Editor lists all of the files that exist in the theme. You can select "New" in the left menu to create new templates or assets. After you modify a file, make sure to "Save" it, or your changes will be lost.

Next, we'll walk through each of the types of files you may want to customize in your theme.

HTML Templating Language

By default, all of the files are treated as HTML templates. In the above Code Editor image, you can see that the file name "home" does not need to be "home.html". This is fully up to you, but it's important to know that files are treated as HTML by default.

All HTML files include the Liquid markup language. Liquid is a way to make your template dynamic in a safe and fairly straightforward way. We don't include the entire set of Liquid functions, but should have everything that you need. As always, reach out if you think that something is missing that you'd like to use.

Add Javascript

Any template that ends in .js is treated as a JavaScript file. We will not apply any custom transformations to your JavaScript, and will not parse it with Liquid.

JavaScript files are typically included in the "post_body" template. This template is included at the very end of the body tag, which is the ideal place to include scripts. You can reference your JavaScript assets in the following way:

<script type="text/javascript" src="/assets/theme.js"></script>

This file is cached so that your users have a fast loading experience.

Add CSS

Any template that ends in .css is treated as a CSS file. We will not apply any custom transformations to your CSS, and will not parse it with Liquid.

CSS files are typically included in the "head" template. This template is included at the end of the head tag, which is the ideal place to include CSS. You can reference your CSS assets in the following way:

<link type="text/css" rel="stylesheet" href="/assets/theme.css">

This file is cached so that your users have a fast loading experience.

Copy and Update a Theme

You can make changes to your theme files at any time. If the theme is currently live for your hub, then it will be immediately applied and will be seen by users. This is sometimes okay, but you may want to stage changes to test them out ahead of time. Or maybe you want to hold off on changes until a redesign is launched.

The best way to achieve this is to "Copy" the theme from the Theme Management page. When you copy a theme, all of the files are cloned and added to a new theme. This theme is placed at the top of your theme list. You can then apply any changes you want, preview those changes, and "Make Live" when you're ready.

You'll want to follow best practices if you're frequently copying templates. We advise to have 1 live theme and 1 staged theme if you're making use of this flow.

Preview a Theme

From the Theme Management page, you can click "Preview" to view that theme on https://preview.cloveapp.io. You can preview your current live theme (which is useful if you haven't yet launched on your company domain), or you can preview a staged theme.

All of your theme functionality should work while in preview mode. However, your media assets and theme settings are not versioned.

Create a Packaged Theme

It's possible to create a packaged theme that can be quickly installed into a hub. Currently, this functionality is not documented, but we'll happily help you out. Reach out to us to start the process.