Customize global styles

In short. Styles & Layouts is the fine-grained styling editor inside Appearance → Theme Editor. It has five panels — Typography, Global Colors, Layout, Button Styles, Accessibility — and every value you set there cascades to every page on your site. Use it when a theme preset got you most of the way but you need to override one font, one color, or one button radius without swapping the whole theme. Each panel saves independently. Changes go live on the next page load — no build step.

On this page: What it's for · Scope · Examples · Steps · What success looks like · Troubleshooting

How to tune typography, colors, buttons, layout, and accessibility sitewide

Styles & Layouts is the fine-grained styling editor that sits alongside the Theme picker. Where a Theme is a full preset, Styles & Layouts is five focused panels for the specific values that cascade to every component.

What is this for?

Use Styles & Layouts when a theme preset got you most of the way but you need to override a specific value — a different body font, a slightly darker primary, wider page gutter, a sharper button radius, or a minimum contrast ratio for accessibility. Typical triggers: brand refresh that only changes button corners, an accessibility review that flagged low contrast, or a custom font that needs wiring into H1 and H2 without touching anything else.

Scope

Styles & Layouts covers seven groups of global design tokens: Typography (font families, weights, sizes, line heights for H1–H6 and body), Global Colors (primary, secondary, background, text, link, named accent slots), Layout (container max-width, section vertical spacing, gutter width), Button Styles (radius, padding, hover behaviour, filled vs outlined variants), Cards (border radius, shadow, spacing for card components), Accessibility (minimum contrast ratios, focus-outline style), and Fonts (custom font integration). Tokens saved here apply sitewide — there are no per-page overrides at the Styles & Layouts level. Per-page overrides require Custom CSS scoped to body.page_id-N.

Examples

Example 1: Enforce your brand font. Open the Typography panel, set H1 through Body to your exact font family and scale, Save. Every page picks up the new fonts.

Example 2: Fine-tune the primary color for your site. The swatch gave you #C83C3C but your brand spec calls for #4394BE (your signature brand blue). Open Global Colors, edit Primary, Save. Buttons, links, and focus rings all update. Your homepage hero instantly repaints:

Example 3: Meet a WCAG AA contrast target. Open Accessibility, raise minimum contrast ratio and enable focus-ring outlines. Save. Every interactive element gets the new accessibility treatment.

Example 4: Tune page width and gutter for a campaign landing page. Open Layout, drop the container max-width from the default 1280px to 1120px and bump the gutter from 16px to 24px. Save. Every SGB page re-flows with the tighter reading column and a roomier edge.

Example 5: Match button shape to your brand. Open Button Styles, set Primary radius to 0 for sharp corners, padding to 14px 28px, hover darken by 10%. Save. Every Primary button across the site picks up the new shape on the next page load.

Fields

Each panel in Styles & Layouts feeds into the same set of CSS variables your pages read at render time. The table below maps panel → key field → variable name. Knowing which variable each panel writes makes Custom CSS much easier — you can grab the variable name and override a single rule without abandoning the panel values. A typical brand-refresh save produces variables like these:

What NOT to use this for

• Do not use Styles & Layouts as a one-off CSS escape hatch. If you need fully custom CSS (selector-by-selector overrides, keyframes, media queries), write it in Custom → CSS instead.
• Do not edit the preset through the URL. The five panels use ?p=typography, ?p=global_colors, ?p=layout, ?p=buttons, ?p=accessibility. Always edit through the admin UI — it makes sure all five panels stay in sync.

How this connects to other features

• Themes — picking a swatch in Themes merges the preset's defaults onto Styles & Layouts. Any values you customized here can be overwritten.
• Custom CSS — for rules Styles & Layouts can't express, write a Custom CSS entry.
• Custom Fonts — fonts you upload under Custom → Fonts appear in the Typography panel's font picker.
• Templates — the templates (header/footer/mobile menu) render through the styles_layout values you set here.

Before you start

• You are signed in as an admin with Appearance access.
• You have your brand hex codes, font specs, and any accessibility targets ready.
• You know which panel owns the change you want to make (the five panels are below).

Where to go

1. Open the left navigation.
2. Click Appearance → Theme Editor. The Theme Editor's last five tabs are the five Styles & Layouts panels:

Steps

1. Typography — set fonts and scale

Pick a family for H1–H6 and Body, set sizes, weights, and line heights. Saves independently — changing typography does not touch colors.

2. Global Colors — palette tokens

The palette tokens (Primary, Accent, Background, Text, Muted) cascade to every component that references them. Edit the hex value, hit Save.

3. Layout — page widths and gutters

Max-width of the content column, gutter widths, section spacing. Applies to every SGB page.

4. Button Styles — per-button look

Primary, Secondary, Outline, Text buttons — each has its own color, radius, padding, hover state.

5. Accessibility — contrast and focus

Minimum contrast ratios, focus-ring outlines, skip-to-content link, reduced-motion fallbacks.

The complete flow

Work through each panel in order — Typography → Global Colors → Layout → Button Styles → Accessibility — clicking Save Changes after each one. The site updates on reload.

After each panel saves, the flash message looks like this. It names exactly which fields were written so you can confirm the change stuck:

What success looks like

• Every page picks up the new fonts, colors, button radius, layout widths.
• Switching to a different Theme swatch later preserves the other fields you did not touch — Styles & Layouts deep-merges on save.

What to do if it does not work

• I saved typography and my colors changed too. Unlikely — panels save independently. Check that the swatch you're on matches what you expect; a different swatch may have been picked accidentally.
• My accessibility focus ring is missing on one browser. Not every browser honors all focus-ring settings. Test in multiple browsers.
• My Custom Fonts are not showing in the picker. Confirm the font is listed under Custom → Fonts, and that it has a weight variant matching what you pick in Typography.

Next step

• Pick a theme (color swatches + 8 chrome slots)
• Configure the header (logo, nav, CTAs)
• Configure the footer (columns + widgets)
• Configure the mobile menu (drawer)
• Build a navigation menu (menu builder + locations)
• Manage widgets (paragraph, image, embed, code)
• Use shortcodes ( etc.)