Theme Management

Apply, Edit, and/or Change your sites theme

Updated over a week ago

Theme Selection

The very first step before you make changes to your Theme is to select the theme you would like to customize.

The name of the Theme you currently have is shown in two places, in the breadcrumb links at the very top of the page, and below there above the theme tabs.

To change which theme is currently selected, click on the blue "Themes" Breadcrumb link at the top. The one next to the 3 lines.

From there, you'll be able to select from all of the available Themes

Motivate (default) - Featuring a horizontal navigation bar with bold and modern design, Motivate communicates professionalism and inspires your users to take action.

Foundation - Foundation offers a vertical sidebar navigation and futuristic design elements that simplify the browsing experience and maximize focus on the page content.



NOTE: When you are changing between Themes, make sure you save any changes you have made by clicking the blue "Save" button. You can always load return to this theme with your customizations by switching back later.


Theme setup

All themes have a default set of colors and font presets. To quickly update your theme to match your branding, simply click “APPLY” > “BRAND” and all theme colors and fonts will be updated to match your branding center.

1. Color & Fonts:

Configure your theme colors and fonts on these tabs.

2. CSS:

When it comes to CustomerHub themes, you have complete control. Here you can edit the themes main styles and JS or add your own custom style changes and/or scripts. There are four sections to this area of your theme: Grid, Default, Form, Utils, and Overrides.

You can only edit your Overrides, the rest are predetermined by your selected Theme.

3. JavaScript:

This is where you can add JavaScript Code to your site. You can import JavaScript Libraries and add plugins here.

4. Components, Parts, & Layouts

  • Components: All themes have a set of page components that can be customized. Each competent is a type of content that can be added when building a page. (eg. Video, audio, file, image, etc. SEE page builder)

  • Parts: This contains the Header and Footer for your entire site.

  • Layouts: Theme layouts allows you to access the base HTML, CSS, and JS code for each page of a theme.


CAUTION:

Editing theme layouts require an experienced knowledge of HTML, CSS, and JavaScript.


5. Save and Publish

Commit any changes to your theme to live.

  • Click Save, then Publish to finalize changes. Make sure you wait until the Save button stops spinning before clicking the Publish button. Otherwise you may need to save and publish again.

  • Login in as a test user to preview your site.

Coming Soon

  • Theme preview

  • Restore previous versions of a theme

Did this answer your question?