The theme sets the look of the whole site. Widgets use theme colors and text styles unless you change them one by one, so changing the theme restyles every page at once. Open Theme in the left rail. Colors opens in place; Buttons, Text, Fonts, Width & Spacing, Images, Backgrounds, Cursor and Motion each open their own page (use the back arrow to return).
How to restyle a site from the theme
- Open Theme > Colors and set Primary and Secondary (or click Generate from logo).
- Open Fonts and add the fonts you want.
- Open Text and set the font, size and color of Paragraph and Heading 1 to Heading 6.
- Open Buttons and style Primary and Secondary buttons.
- Check a few pages on Tablet and Mobile, then publish.
Colors
The palette has Primary, Secondary and Color 3 to Color 8. Click a swatch to edit it in the color picker. Widgets that use a theme color follow it everywhere.
- Generate from logo reads the colors of the logo in Business Info and shows "Colors from your logo:" with a suggested palette. Click Apply to use it or Cancel to skip. After applying, "Logo colors applied." shows an Undo link that puts your old colors back. It runs in your browser and costs nothing.
- Use exact brand colors appears only when Zeus toned a clashing brand color down for a design. Tick it to use the exact brand color instead; untick to go back.
- Sites Zeus built follow these colors everywhere he used them, including his lighter and darker shades of Primary (a darker green for small text, a lighter tint behind a menu item). Change Primary and those shades change too. Colors you picked yourself, and white or black text on photos and dark bands, stay as they are.
- Sites made from a template keep the template's theme, so they look exactly like it. The template's own theme colors are linked, so changing Primary or Secondary later changes them too. Its see-through panels over photos, white headings on dark bands and colors inside text stay as designed. Fill a template with Zeus puts the client's brand colors in and makes sure everything still reads. A designed section you add yourself keeps its own colors.
- Imported sites: colors that are exactly the brand colors the import found follow Primary and Secondary. Other colors stay as they were on the old site.
- A new popup's background is the site's page background, so it changes with the theme too.
- A widget color that follows the theme shows the theme's current color when you open it in the color picker. Pick another color and it stops following the theme.
Buttons
Pick Primary or Secondary at the top, then Button style or Button text. Every button set to that style follows these settings.
Button style
- Background color.
- Border: width 0 to 10 px, and its color.
- Border radius: 0 to 50 px. 50 gives pill-shaped buttons.
- Icon color: the color of an icon inside the button.
- Change color on hover: the Background color, Border color and Icon color when the mouse is over the button.
- Layout > Padding: Compact, Regular or Loose. Full width stretches buttons across their box.
Button text
- Font family, Font size, Font weight.
- Format: Bold, Underline, Italic.
- Text color, Text alignment, Text transform (None, Uppercase, Lowercase, Capitalize) and Letter spacing.
- Text direction: LTR or RTL (for right-to-left languages).
- Hover: the Text color and Format on hover (bold, underline or italic when the mouse is over it).
For one button's own settings, see Button widgets.
Text
Pick a style at the top: Default, Paragraph or Heading 1 to Heading 6. A preview shows the style as it looks.
- Font family, Font size, and Tablet size and Mobile size (8 to 96 px). These say "Same as desktop" or "Same as tablet" until you change them; click that text to go back.
- Font weight, Format (Bold, Italic) and Text color.
- Text direction: LTR or RTL.
- Link styles (Default only): Default Link State, Link on hover and Link clicked, each with an underline switch and a color.
- More options: Line height, Letter spacing, Paragraph spacing (Paragraph only, 0 to 48 px between paragraphs in one text box) and Text transform.
Text that has no color of its own follows the section it sits in. On a dark background, a dark theme color shows as white instead; on a light background, a light theme color shows as near-black. Links are held to the readability standard for normal text (4.5 to 1) on the background they sit on. A link color that doesn't reach it shows in the nearest lighter or darker shade of the same color that does, so a navy link becomes a light navy on a dark footer and a pale link becomes a deeper shade on white. When the color would have to change too much, the link uses the theme's text color for that background instead. Widget text with no color of its own follows it too, like a review rating, and so does text inside a widget's own card, field or panel, which follows that card instead of the section around it. Text you color yourself keeps your color.
Fonts
The list shows every font on the site, marked Google or Uploaded.
- Add from Google opens Add Google Font. Search by name and click Add. Fonts already on the site say Available.
- Upload font opens Upload Font: choose a .woff2, .ttf or .otf file (max 5 MB), check the Font family name (it's the name shown in font pickers), and click Upload font.
- To remove a font, click its remove button and confirm. Any text still using it falls back to the theme default.
Fonts you add appear in every font picker on the site.
Width & Spacing
- Page Width: Full width sections stretches every section edge to edge. Otherwise choose the maximum width for sections: 1200px, 1440px, or a Custom width from 960 to 1920 px.
- Section Spacing, Column Spacing and Inner Column Spacing: the default padding for each. Use the Desktop, Tablet and Mobile buttons to set different padding per screen size. Tablet and Mobile say "Inheriting Desktop values" until you change them. ↺ Reset to default (Desktop) or ↺ Clear override (Tablet, Mobile) undoes a change.
A section or column with its own padding keeps it. To go back to these defaults, right-click it and choose Reset to Theme Spacing.
Images
Default look for Image widgets: Border (0 to 20 px and a color), Corner radius (0 to 80 px) and Shadow. Logos don't take these, so their corners aren't cut off.
Backgrounds
- Default Background: the page background for the whole site. Choose Color or Image. For an image, click to pick it, then set Position (Center, Top, Bottom, Left, Right or a corner), Size (Cover, Contain, Auto) and Repeat.
- Background Per Page: pick a Page and give it its own background. The page says "Inheriting site default background." until you change it, then "This page has a custom background." Reset to default background removes it.
Section and column backgrounds sit on top of the page background.
Cursor
- Custom cursor: replaces the mouse pointer with a Dot, Ring, Icon or Picture. Set its color, Size (10 to 40 px), Invert blend, Grow over links & buttons, Glow on click and Hide the normal pointer everywhere (also over links and buttons, but never over text fields).
- Cursor effects: Label over buttons & links, Trail and Magnetic buttons.
- Cursor trail on every section: a trail of text characters behind every section's words.
Details: How to add cursor effects and How to add a cursor trail. These show in Preview and on the live site, not while you edit.
Motion
"Pause motion" button: where the automatic pause button sits for visitors: Automatic, Bottom left or Bottom right. It's added to any page with a cursor trail, a media vortex, cursor effects or a Particle Image. It works with the keyboard, is remembered for each visitor, and moves out of the way of chat bubbles, cookie banners and the Cookie settings button (to the other bottom corner, or just above them), never up into the header or menu. In Preview it sits in the bottom corner of the site's screen (desktop, tablet or phone), never over the editor's own buttons. You can't remove it from those pages.
Contrast checker
When you pick a text color in a Text widget or a button's text color, the picker shows the contrast ratio against the background behind it. It marks whether it passes AA and AAA accessibility levels. The check is off over images, videos and gradients.
Examples
- A plumber's site in brand colors: upload the logo in Business Info, click Generate from logo, Apply, then set Primary buttons to Loose padding and a 50 px Border radius.
- A law firm with a custom font: upload the firm's .woff2 file under Fonts, then pick it for Heading 1 to Heading 3 in Text.
- Tighter phone spacing: in Width & Spacing, click Mobile and lower Section Spacing to 40 px top and bottom.
- A cream page background behind a landing page only: Backgrounds > Background Per Page, choose the page, set Color.
Limits and what it can't do
- 8 theme colors (Primary, Secondary, Color 3 to Color 8).
- Font uploads: .woff2, .ttf or .otf only, up to 5 MB each.
- Custom page width: 960 to 1920 px.
- Theme spacing has Desktop, Tablet and Mobile values; Ultrawide uses Desktop.
- Theme changes, like all edits, go live only when you publish the site.
Who can use it
Agency people with the Mount Olympus tool. Client people need the Editor permission to see the Theme panel.
Troubleshooting
- "Add a logo in Business Info to generate colors from it.": there's no logo yet. Add one in CMS > Business Info.
- "No colors found in the logo." / "Couldn't read the logo's colors. Try uploading the logo again in Business Info.": the logo is blank, all white or transparent, or the file couldn't be read. Upload a different logo file, or set the colors by hand.
- "Only .woff2, .ttf, and .otf files are accepted" / "Unsupported MIME type — please use a .woff2, .ttf, or .otf file": convert the font to .woff2 first (.woff files aren't accepted).
- "File too large (max 5 MB)": use a .woff2 version, which is much smaller.
- "Upload failed — please try again": the upload was interrupted. Try again.
- A widget doesn't change when I change the theme: it has its own color or font set. Open its Design panel and pick the theme color or text style again.
- Text turned white on its own: it has no color of its own and sits on a dark background, so it's kept readable. Give it a color to override.
- I changed the theme but the live site looks the same: publish the site.