ℹ️ Where you add custom CSS depends on the theme your site is using. Elevate keeps it under Advanced → CSS; Motivate and Foundation keep it in the CSS tab’s Overrides area. Both are shown below.
⚠️ Known issue (Elevate theme): after you Save & Publish, your custom CSS may disappear from the Advanced → CSS editor even though it is still applied to your live site. If the editor is empty, do not publish again — a second publish can remove the styling from your site. Keep a copy of your CSS outside CustomerHub until this is resolved.
🎨 Elevate: Advanced → CSS
If your site uses the Elevate theme, custom CSS lives in the theme’s Advanced settings:
Click Settings (gear icon) in the sidebar, hover over Brand, then click Theme.
Click CUSTOMIZE on the Elevate card.
Open the ADVANCED tab, then the CSS sub-tab.
Add your CSS in the editor. Standard CSS is supported, including @import for external stylesheets. There is also a JAVASCRIPT sub-tab for custom scripts.
Click SAVE, then PUBLISH to push the change live.
💡 Saving stores your CSS on the theme draft; the change only reaches your users once you Publish.
🔎 Elevate CSS class reference
Elevate ships with a built-in reference of every CSS class the member experience renders, so you do not have to inspect the page to find a selector. Open your theme and click the CONTENT tab — the Content reference lists every class, with a running total at the top.
The reference has two views:
PAGES — one entry per page of the member site (Dashboard, Library, Login, Notes, and so on), each with its own base class such as ch-page-dashboard.
COMPONENTS — the reusable pieces that make up those pages, each with a base class such as ch-component-achievement-card.
Select an item to see its classes grouped into BLOCK (the wrapper), PARTS (elements inside it, written as base__part) and MODIFIERS (state or layout variants, written as base--modifier). Use the search box to filter the list, the copy icon to copy a single selector, the {} icon to copy it as an empty rule ready to fill in, or COPY ALL to take every selector for that page or component.
Paste the selector you copied into ADVANCED → CSS, add your declarations, then save and publish the theme.
🧩 Motivate and Foundation: CSS tab → Overrides
If your site uses the Motivate or Foundation theme, the steps are the same for both:
Go to Settings > Themes and edit your current theme.
Click on the CSS tab.
Preview the theme CSS style sheets (optional).
Add your own custom CSS in the Overrides area.
Save and Publish your theme.
📋 Tips
Target the most specific class you can. Styling a PART or MODIFIER keeps the change contained; styling a BLOCK affects everything inside it.
Keep customizations small and add them one at a time so you can tell which rule caused an unexpected change.
Colors, fonts and layout options that are already available on the COLORS, FONTS and CONTENT tabs do not need custom CSS — use the built-in settings first.
❓ FAQ
Do I need custom CSS to change my navigation icons?
On Elevate, no — use the built-in icon picker (see Add custom navigation icons). On Motivate and Foundation, navigation icons are set with CSS references added to your custom CSS.
Why is my CSS not showing on the member site?
Custom CSS only goes live after you Publish the theme. If it is saved and published and still not applying, another rule is likely more specific — target a more specific class from the reference.
Does the class reference exist on Motivate and Foundation?
No. The Content reference is part of the Elevate theme. On Motivate and Foundation you can preview the theme style sheets from the CSS tab instead.
Can I load an external stylesheet or font?
Yes — Elevate’s CSS editor supports @import for external stylesheets.