advoc8 Themes (SA #1778)

advoc8 Themes

Learn about how to create and update your advoc8 theme using our powerful tools for full site updates.

1. What a theme controls

Every advoc8 website is built from blocks that reference your theme rather than hard-coded styling. Your theme sets the values those blocks read: the navy in your header, the orange on your buttons, the font your headlines use, how round your cards are, how much space sits between sections.

That means two things worth knowing up front:

One change updates everywhere. Change your accent color once and every button, link highlight, and icon accent across the site changes with it.
You do not need to edit pages to restyle the site. Page content and page design are separate jobs. This tool is the design job.

Themes apply only to advoc8 website designs. Older, non-advoc8 templates are unaffected by anything on this screen.

2. Who can use it

To open and edit themes you need both of the following:

An active website plan on your account.
The Themes permission under CMS Hosting Manager in your user profile.

If you can reach the screen but see an access message instead of the theme list, ask your account administrator to enable that permission for your login.

3. The Themes list

The landing screen lists every theme saved on your website.

Column	What it shows
Name	The label you gave the theme. Internal only — visitors never see it.
Template	Main Site if the theme applies site-wide, or the name of the template it is attached to. ** DELETED TEMPLATE means the template it pointed at no longer exists.
Updated	When the theme was last saved.
Status	A green Active or red Inactive badge. Only Active themes are used by your live site.
Edit	Opens the theme editor.
Delete	Removes the theme. This is permanent and cannot be undone.

Use Create a Theme to start a new one, or Back to Website Services to leave.

4. Main Site vs. Template themes

Each theme is scoped to one of two things, chosen in the Template field:

Main Site — the theme your whole website uses.
A specific template — the theme used only by pages built on that template. This lets a campaign microsite or a landing-page template carry its own colors while the rest of the site stays on brand.

When a page loads, the site looks for an Active theme matching that page's template first. If none exists, it falls back to the Active Main Site theme.

Important. Keep exactly one theme Active per scope — one for Main Site, and at most one per template. If two themes are Active in the same scope, the site picks the first one it finds and the other is silently ignored.

This is also the safest way to try a redesign: build a second theme, leave it Inactive while you work, then flip the old one to Inactive and the new one to Active when you are ready.

5. Creating a theme

From the Themes list, click Create a Theme.
Give it a Theme Name you will recognize later — “Main Brand 2026” beats “New Theme”.
Choose the Template scope (leave it on Main Site for a site-wide theme).
Set Status to Inactive while you build it out, so visitors do not see a half-finished design.
Work down the sections, watching the live preview panel as you go.
Click Save Theme. The editor reloads with your saved theme, and a Delete Theme button appears alongside Save.
When you are happy with it, set Status to Active and save again.

6. How the editor works

The editor is split into labelled sections. Within each section, the settings sit on the left and a live preview of those settings sits on the right. The preview updates the moment you change a value — you do not need to save to see the effect.

Color fields show a swatch to the left of the box. Click either the swatch or the field to open the color picker, or type a hex value like #1a2b4a directly.
Font fields show a magnifying glass. Click it to open the font browser.
Size fields take normal CSS values — 1rem, 18px, 100vh, 1280px. Always include the unit.
On narrow screens the preview panel moves below the settings instead of beside them.

The preview is an approximation for judging color, weight, and proportion. It is not a rendering of your actual pages, so check a real page after saving.

7. General Settings

Setting	What it does
Theme Name	An internal label. Visitors never see it, so name it for your own sanity — include the year or the campaign.
Template	Main Site applies the theme site-wide. Picking a template restricts it to pages built on that template.
Status	Active puts the theme on your live site. Inactive keeps it saved but unused.

8. Colors

Nineteen colors, grouped by the job they do. The preview strip on the right shows them together, which is the fastest way to spot a combination that fights itself.

Primary

Your core brand color and its two shades. Used for headers, solid navigation bars, and large areas of brand color.

Setting	What it does	Theme value
Primary Main	The main brand color. If you only get one color right, make it this one.	`--advoc8-color-primary`
Primary Light	A lighter tint of Primary, used for hover states and softer fills.	`--advoc8-color-primary-light`
Primary Dark	A deeper shade of Primary, used for gradients and darker bands.	`--advoc8-color-primary-dark`

Accent

The color that draws the eye — buttons, links, highlights, icon fills. It should contrast clearly against Primary rather than sit next to it on the color wheel.

Setting	What it does	Theme value
Accent	The main call-to-action color.	`--advoc8-color-accent`
Accent Hover	What accent elements change to on mouse-over. Usually a slightly darker version of Accent.	`--advoc8-color-accent-hover`
Accent Light	A pale tint of Accent for badges, subtle backgrounds, and highlight washes.	`--advoc8-color-accent-light`
Accent Secondary	A supporting accent for designs that use two highlight colors.	`--advoc8-color-accent-secondary`

Backgrounds

The surfaces your content sits on. Alternating sections between Background and Background Secondary is what gives an advoc8 page its rhythm.

Setting	What it does	Theme value
Background	The default page background — usually white or near-white.	`--advoc8-color-bg`
Background Secondary	The alternating section background. Keep it close to Background — a soft off-white or pale grey — so the shift is felt, not seen.	`--advoc8-color-bg-secondary`
Background Accent	A tinted section background for pulling a block out from its neighbors.	`--advoc8-color-bg-accent`
Background Dark	The background for dark sections. Text on these sections is set to white automatically, so pick something genuinely dark.	`--advoc8-color-bg-dark`

Text and lines

Setting	What it does	Theme value
Sky	A light atmospheric tone used in gradients, overlays, and decorative washes.	`--advoc8-color-sky`
Text	Body copy and headings on light backgrounds. A very dark grey usually reads better than pure black.	`--advoc8-color-text`
Text Muted	Captions, labels, and supporting copy. Keep it dark enough to stay readable — muted should not mean invisible.	`--advoc8-color-text-muted`
Border	Dividing lines, card outlines, and input borders.	`--advoc8-color-border`

Status and footer

Setting	What it does	Theme value
Footer Background	The footer's background color. It is set here rather than in the Footer section, so you can judge it against the rest of the palette.	`--advoc8-footer-bg`
Success	Confirmation messages and completed states. Conventionally green — keep it recognizable even if it does not match your brand.	`--advoc8-color-success`
Warning	Cautions and pending states. Conventionally amber or yellow.	`--advoc8-color-warning`
Error	Form errors and failure messages. Conventionally red.	`--advoc8-color-error`

Accessibility. Check that Text against Background, and white against Accent, are comfortably readable. A brand color that looks great as a large block often fails as small text on white. Nudge the accent darker for text use rather than abandoning it.

9. Fonts

Two typefaces do the work: a display face for headlines and a body face for everything else. The five size fields set your type scale.

Using the font browser

Click the magnifying glass beside Base Font or Display Font.
Search by name, or filter by category: Sans Serif, Serif, Display, Handwriting, or Monospace.
Hover a font to load a live sample of it. Click to select it.
The Font Import URL rebuilds itself automatically, and the typography preview refreshes.

Watch out. The import URL only rebuilds when you pick a font from the browser. If you type a font name into the field by hand, you must update Font Import URL yourself — otherwise the font never loads and visitors see a fallback.

Setting	What it does	Theme value
Font Import URL	The Google Fonts stylesheet that loads your chosen fonts. Managed for you when you use the font browser. Maximum 500 characters.	—
Base Font	Body copy, navigation, buttons, form labels — the majority of the text on your site. Favour readability over personality here.	`--advoc8-font-body`
Base Font Size	The base body text size, for example `1rem` or `12pt`. Everything else scales in relation to it.	`--advoc8-text-base`
Display Font	Headlines and hero text. This is where personality belongs. It can be the same as the Base Font for a single-typeface look.	`--advoc8-font-display`
Display Font Size	The largest size on the site — hero headlines. A responsive value such as `clamp(24px, 8vw, 4em)` keeps it from overflowing on phones.	`--advoc8-text-6xl`
h2 Font Size	Main page headings.	`--advoc8-text-5xl`
h3 Font Size	Section headings.	`--advoc8-text-4xl`
h4 Font Size	Sub-headings and card titles.	`--advoc8-text-3xl`

Keep the sizes stepping down in clear increments. If h2 and h3 are nearly the same size, the page loses its sense of hierarchy.

10. Buttons

Setting	What it does	Theme value
Button Style	The overall button shape. Default uses whatever you set for Button Border Radius. Pill gives fully rounded ends. Square gives hard corners.	`--advoc8-radius-btn`
Default Button Size	Sets padding and label size for standard buttons: Large, Default, or Small. Individual blocks can still override this.	`--advoc8-btn-padding-y` `--advoc8-btn-padding-x` `--advoc8-btn-font-size`

Watch out. Choosing Pill or Square overrides Button Border Radius in the Borders & Shadows section. If your custom radius appears to be ignored, this is why — switch Button Style back to Default.

The preview shows primary, secondary, and ghost buttons on both a light and a dark background, so you can confirm the ghost style stays visible in both places.

11. Borders & Shadows

How sharp or soft your site feels. Small radii and no shadow read as serious and institutional; large radii with soft shadows read as friendly and modern.

Setting	What it does	Theme value
Base Border Radius	The default corner rounding for inputs, tags, and small elements. Try `6px` or `8px`.	`--advoc8-radius-md`
Card Border Radius	Corner rounding for cards and larger panels. Usually a little more generous than the base — `12px` is a good starting point.	`--advoc8-radius-xl`
Button Border Radius	Corner rounding for buttons. Only applies when Button Style is set to Default.	`--advoc8-radius-btn`
Shadow Intensity	How much cards and raised elements lift off the page. None is completely flat and pairs well with visible borders. Subtle is a light lift that separates cards without drawing attention. Dramatic gives pronounced, layered depth.	`--advoc8-shadow-sm` `--advoc8-shadow` `--advoc8-shadow-lg`

12. Navigation

Setting	What it does	Theme value
Nav Style	Solid gives the header a filled background in your Primary color. Transparent lets a hero image show through behind the header — striking on pages with a full-bleed hero, but check your interior pages, where a transparent header over a white page can leave menu links hard to see.	`--advoc8-nav-style`
Nav Position	Fixed keeps the header visible at the top of the screen at all times. Sticky lets it scroll away, then re-attaches it when you scroll back up. Static scrolls it with the page.	`--advoc8-nav-position` `--advoc8-nav-offset`
Nav CTA Style	The look of the header's call-to-action button: Primary (accent fill), Secondary (primary fill), or Ghost (outline only).	`--advoc8-nav-cta-style`
Nav CTA Text	The button label — “Give”, “Plan Your Visit”, “Donate”. Keep it to one to three words.	`--advoc8-nav-cta-text`
Nav CTA URL	Where the button goes. Use a full address for external destinations, or a path such as `/give` for a page on your own site.	`--advoc8-nav-cta-url`

13. Hero Section

The hero is the top band of your home page — typically a large image or video with a headline over it.

Setting	What it does	Theme value
Hero Style	FullScreen overlays content on a full-width background image. Split puts text on the left and an image or video on the right. Centered centers the headline and buttons over the background. Video uses a looping video background with an overlay.	`--advoc8-hero-style`
Overlay Opacity	How much dark tint sits between your background image and your headline. Enter a decimal between `0` and `1` — `0` is no tint, `0.4` is a good default, `1` is solid black.	`--advoc8-hero-overlay-opacity`
Min Height	The shortest the hero is allowed to be. `100vh` fills the whole screen; a fixed value such as `640px` keeps some of the next section visible, which encourages scrolling.	`--advoc8-hero-min-height`

Watch out. Overlay Opacity must be a decimal, not a percentage. Entering 60 instead of 0.6 produces a solid black overlay on the live site, even though the editor preview may still look correct.

14. Branding

Five image addresses. Upload each image through your file manager first, then paste its full address here. Each field holds up to 500 characters.

Setting	What it does	Theme value
Logo URL	Your standard logo, used on light backgrounds. SVG or a high-resolution PNG with a transparent background works best.	`--advoc8-logo-url`
White Logo URL	A white or light version of your logo, used on dark headers, dark sections, and the footer. Without this, your logo can disappear against dark backgrounds.	`--advoc8-logo-white-url`
Logo Icon URL	A compact, square mark — just the symbol without the wordmark. Used in tight spaces such as mobile headers.	`--advoc8-logo-icon-url`
Favicon URL	The small icon shown in the browser tab and in bookmarks. Use a square image, ideally 32×32 or larger.	`--advoc8-favicon-url`
OG Image URL	The preview image shown when someone shares your site on Facebook, LinkedIn, or in a text message. Use a landscape image around 1200×630 pixels.	`--advoc8-og-image-url`

The preview panel renders each image as you paste it in, which is the quickest way to catch a broken address or a logo saved on the wrong background.

15. Sections

Setting	What it does	Theme value
Container Max Width	How wide your content is allowed to grow on large monitors. `1280px` is a comfortable default; `1140px` feels more traditional; `1440px` and above suits image-heavy designs. Content stays centered with margins either side.	`--advoc8-container-max`
Section Spacing	The vertical breathing room above and below each section. `5rem` is the default. Smaller values pack the page tighter; larger values feel more spacious and editorial.	`--advoc8-section-spacing`

16. Animation

Setting	What it does	Theme value
Enable Animations	Enabled lets elements fade and slide into view as visitors scroll. Disabled turns all motion off and shows everything immediately.	`--advoc8-anim-enabled`
Animation Speed	Fast (0.3s), Default (0.6s), or Slow (0.9s). Fast feels crisp and businesslike; slow feels calm and cinematic but can make the page seem sluggish.	`--advoc8-anim-duration` `--advoc8-anim-stagger`

Visitors who have asked their device to reduce motion will not see animations regardless of this setting. That is intentional and helps keep your site accessible.

17. Footer

Setting	What it does	Theme value
Footer Style	Standard is a multi-column footer with a description, link columns, and social icons. Simple is a single row with copyright, a few links, and social icons.	`--advoc8-footer-style`
Footer Background	Set in the Colors section, not here, so you can judge it against the rest of the palette.	`--advoc8-footer-bg`

18. Custom CSS

The last section is a code editor for CSS rules that go beyond the settings above. Your custom CSS is added after everything the theme generates, so it can override any of it.

Two rules keep custom CSS safe:

Scope your selectors. advoc8 content is wrapped in a container with the class advoc8-design. Write .advoc8-design .my-thing { ... } rather than a bare .my-thing, so your rule cannot leak into the rest of the page.
Use the theme values. Reference var(--advoc8-color-accent) instead of pasting a hex code, so your custom rules keep following the theme when the palette changes later.

Before you write CSS. If you find yourself overriding a color, a radius, or a spacing value by hand, check whether a setting above already controls it. Anything set through the fields keeps working when the theme is updated; hand-written overrides have to be maintained.

19. Saving and deleting

Save Theme sits at the bottom of the editor and saves every section at once — you do not save section by section. A confirmation appears when it succeeds.

On a brand-new theme, the editor reloads after the first save and a Delete Theme button appears beside Save.

Deleting is permanent. There is no version history and no undo. If a theme is in doubt, set it to Inactive rather than deleting it.

To keep a snapshot before a big change, create a second theme, copy your current values into it, and leave it Inactive as a fallback.

20. When changes go live

Saving publishes immediately. Your site's stylesheet is rebuilt on the next page request, so changes are live within a second or two — there is no separate publish step.

If you do not see a change straight away, it is almost always your browser holding a cached stylesheet. Force a fresh copy:

Windows — press Ctrl + F5
Mac — press Cmd + Shift + R
Or open the page in a private / incognito window.

21. Full settings reference

Every setting and the theme value it writes. Useful when writing custom CSS, or when a developer asks which value drives a particular part of the design.

Section	Setting	Theme value
Colors	Primary Main	`--advoc8-color-primary`
Colors	Primary Light	`--advoc8-color-primary-light`
Colors	Primary Dark	`--advoc8-color-primary-dark`
Colors	Accent	`--advoc8-color-accent`
Colors	Accent Hover	`--advoc8-color-accent-hover`
Colors	Accent Light	`--advoc8-color-accent-light`
Colors	Accent Secondary	`--advoc8-color-accent-secondary`
Colors	Background	`--advoc8-color-bg`
Colors	Background Secondary	`--advoc8-color-bg-secondary`
Colors	Background Accent	`--advoc8-color-bg-accent`
Colors	Background Dark	`--advoc8-color-bg-dark`
Colors	Sky	`--advoc8-color-sky`
Colors	Text	`--advoc8-color-text`
Colors	Text Muted	`--advoc8-color-text-muted`
Colors	Border	`--advoc8-color-border`
Colors	Footer Background	`--advoc8-footer-bg`
Colors	Success	`--advoc8-color-success`
Colors	Warning	`--advoc8-color-warning`
Colors	Error	`--advoc8-color-error`
Fonts	Base Font	`--advoc8-font-body`
Fonts	Display Font	`--advoc8-font-display`
Fonts	Base Font Size	`--advoc8-text-base`
Fonts	Display Font Size	`--advoc8-text-6xl`
Fonts	h2 Font Size	`--advoc8-text-5xl`
Fonts	h3 Font Size	`--advoc8-text-4xl`
Fonts	h4 Font Size	`--advoc8-text-3xl`
Buttons	Button Style	`--advoc8-radius-btn`
Buttons	Default Button Size	`--advoc8-btn-padding-y`, `--advoc8-btn-padding-x`, `--advoc8-btn-font-size`
Borders	Base Border Radius	`--advoc8-radius-md`
Borders	Card Border Radius	`--advoc8-radius-xl`
Borders	Button Border Radius	`--advoc8-radius-btn`
Borders	Shadow Intensity	`--advoc8-shadow-sm`, `--advoc8-shadow`, `--advoc8-shadow-lg`
Navigation	Nav Style	`--advoc8-nav-style`
Navigation	Nav Position	`--advoc8-nav-position`, `--advoc8-nav-offset`
Navigation	Nav CTA Style	`--advoc8-nav-cta-style`
Navigation	Nav CTA Text	`--advoc8-nav-cta-text`
Navigation	Nav CTA URL	`--advoc8-nav-cta-url`
Hero	Hero Style	`--advoc8-hero-style`
Hero	Overlay Opacity	`--advoc8-hero-overlay-opacity`
Hero	Min Height	`--advoc8-hero-min-height`
Branding	Logo URL	`--advoc8-logo-url`
Branding	White Logo URL	`--advoc8-logo-white-url`
Branding	Logo Icon URL	`--advoc8-logo-icon-url`
Branding	Favicon URL	`--advoc8-favicon-url`
Branding	OG Image URL	`--advoc8-og-image-url`
Sections	Container Max Width	`--advoc8-container-max`
Sections	Section Spacing	`--advoc8-section-spacing`
Animation	Enable Animations	`--advoc8-anim-enabled`
Animation	Animation Speed	`--advoc8-anim-duration`, `--advoc8-anim-stagger`
Footer	Footer Style	`--advoc8-footer-style`

22. Troubleshooting

I saved my theme but the site looks the same

Work through these in order: confirm the theme's Status is Active; confirm its Template scope matches the page you are looking at; then hard-refresh your browser (Ctrl + F5, or Cmd + Shift + R on Mac).

Two themes are Active and the wrong one is being used

Only one theme should be Active per scope. When several are Active for the same scope, the site uses the first it finds. Set the others to Inactive.

My font choice is not showing on the live site

Check that Font Import URL is filled in. It updates automatically only when you pick a font from the font browser — if you typed a name into the field by hand, the font was never loaded. Re-select the font using the magnifying glass to fix it.

My button corner radius is being ignored

Button Style is set to Pill or Square, which forces the shape. Set it back to Default for your radius to take effect.

My hero overlay is completely black

Overlay Opacity takes a decimal between 0 and 1. Change 60 to 0.6.

Text is unreadable on dark sections

Check that Background Dark is genuinely dark — text on those sections is set to white automatically, so a mid-tone background leaves it washed out. Also make sure White Logo URL is filled in, or your logo will vanish there too.

My custom CSS is not applying

Two common causes. Your selector may not be scoped under .advoc8-design, or it may be less specific than the rule it is trying to override. Try making the selector more specific before reaching for !important.

I deleted a theme by mistake

Deletion is permanent and cannot be reversed. You will need to rebuild the theme, or contact support to discuss whether a backup is available.

Themes apply to advoc8 website designs only. For page content and layout, see the Website Pages help articles.

Version 1.6 • Last Updated 8/26/2026 6:49:05 PM

Back to Search