Customizing Your Theme

#Overview

The Theme Configuration page is your central hub for customizing how your site looks. You can set brand colors, choose fonts, upload logos and other images, manage layouts, and add global scripts — all without touching any code.

Navigate to Template > Theme Configuration to get started.

#Style Settings

The Style tab contains all visual appearance settings.

#Theme Colors

CMS Max uses two primary brand colors that appear throughout your site:

• Primary Color — Your main brand color. Used for buttons, links, and key accents.
• Secondary Color — A supporting color for complementary design elements.

To change a color:

1. Navigate to Template > Theme Configuration.
2. Click the Style tab.
3. Click the color swatch next to Primary Color or Secondary Color.
4. Choose a color using the color picker or enter a hex code (e.g., #0055A4).
5. Click Save.

#Theme Fonts

Choose the fonts used for headings and body text across your site:

1. On the Style tab, scroll to Theme Fonts.
2. Click Add Font to add a font from the supported library.
3. Select the font and choose whether it applies to Headings, Body, or both.
4. Click Save.

Tip: Limit your site to two font families for a clean, professional look. One for headings and one for body text is the standard approach.

#Site Images

Upload the branding images your site uses globally:

To upload a site image:

1. On the Style tab, scroll to Site Images.
2. Click the upload area next to the image you want to replace.
3. Select your file.
4. Click Save.

#Layouts

The Layouts tab lets you create and manage page layout templates — the structural containers that define where your header, content, sidebar, and footer appear.

#Creating a Layout

1. Click the Layouts tab.
2. Click Create Layout.
3. Enter a Display Name (e.g., "Sidebar Right") and a File Name (a unique identifier with no spaces).
4. Add the slots you want: the Content slot is required; additional slots like Header, Above Content, Below Content, and Footer are optional.
5. Click Save.

#Editing a Layout

Click an existing layout to modify its slot configuration. This is commonly used to create a custom homepage layout with a unique header section.

#Default Page Layouts

On the Default Page Layouts tab, you can assign a default layout template to specific content types.

For example, if you want all blog pages to use a "Sidebar Left" layout:

1. Click the Default Page Layouts tab.
2. Find the content type (e.g., Blog Pages).
3. Select your preferred layout from the dropdown.
4. Click Save.

Individual pages can still override the default by selecting a different layout in their own settings.

#JavaScript

The JavaScript tab lets you add global scripts that load on every page of your site:

1. Click the JavaScript tab.
2. Click Add Script.
3. Give the script a name, choose where it loads (head or footer), and paste the script content.
4. Make sure it is wrapped in standard <script> tags.
5. Click Save.

Scripts can be toggled active or inactive without deleting them, which makes it easy to enable and disable third-party tools as needed.

#Theme Sections

Beyond Theme Configuration, you can also edit the visual content of your site's header, footer, and other fixed areas:

1. Navigate to Template > Theme Sections.
2. Click on a section (e.g., Header or Footer).
3. Edit the content in the editor.
4. Click Save.

By default, your site includes these sections:

• Header — Top navigation and logo area
• Footer — Bottom of the page with links and contact info
• Above Content — Area displayed above the main page content
• Below Content — Area displayed below the main page content
• Mobile Sticky Content — A fixed bar at the bottom of the screen on mobile devices

#Creating a Custom Section for a Specific Page

You can create a unique version of any section for use on just one page or layout type:

1. Navigate to Template > Theme Sections.
2. Click New Section.
3. Build the section content in the editor.
4. Go to Template > Theme Configuration > Layouts and create (or edit) a layout that uses your new section.
5. On the individual page, select that layout from the Layout dropdown in the page settings.

#Why Some Content Opens in the Older Editor

When you edit a blog post, product, event, or similar content, CMS Max picks the editor that can safely hold that content:

• Content written in the new editor (or brand-new content) opens in the new editor.
• Content that contains custom markup — CSS classes, inline styles, or embeds from the older editor — opens in the legacy editor, which preserves that markup exactly. A note under the editor tells you when this is why.

This protects older content: the new editor works with clean, structured content and would simplify custom markup on save, changing how the content looks. Content that opens in the legacy editor will continue to open there, even if you later remove that custom markup — nothing is ever converted behind your back.

Content that opens in the legacy editor also keeps its own stylesheet, so it goes on looking exactly as it did. Content written in the standard editor is styled by your theme and needs no stylesheet of its own — which is why pages load less CSS than they used to. This is automatic; there is nothing to configure.