DocumentationStyling
Theme settings
Zen Builder → Theme Options holds your site-wide design system. Saving it regenerates the Bootstrap stylesheet and updates the editor colour palette.
What you can set
Site
- General — lazy loading, breadcrumbs, Bootstrap table styling, a transparent home page header and the gallery lightbox.
- Google Fonts — paste a Google Fonts URL, name up to two fonts, then choose where each is used (navigation, buttons, lead text, display headings).
- Colors — primary, secondary, headings, body text, the grey scale and status colours.
- Typography — base font size, heading and display sizes, line heights and weights.
- Borders — border width and corner radius.
Advanced website styling
Typography, Grid (breakpoints and container widths), Buttons, Forms, Components (accordion, cards, modals), Header & Footer, Navigation and Custom CSS & JS.
Save and regenerate
- Change the values you need.
- Click Save Changes.
- Wait for the message New style sheet successfully generated.
- Refresh the front end. Clear any page cache or CDN if you use one.
The Custom CSS & JS fields suit small snippets. Keep larger stylesheets in the child theme’s style.css.