The look of your site comes from several layers that work together. This page explains the layers, which screen controls which, and what to do when a change does not show on the public site.
Appearance → Theme Options is the main place to shape the Echo theme.
TruCMS comes with the Echo theme for the public site and a separate theme for the admin panel. There is no theme shop or theme switcher: instead Echo is designed to look very different depending on the options and content you give it. A salon, a clinic, a shop and a restaurant can all run on Echo and look nothing alike.
Because of that, “changing the theme” in TruCMS means working through the layers below, from the whole site down to a single page.
| Layer | What it controls | Where | Scope |
|---|---|---|---|
| Website template | A complete starting point: pages, menus, colours, fonts, header, footer, sample content and (optionally) demo data for a Booking or shop business. | Appearance → Website Templates | Whole site (once) |
| Theme Options | Colours, fonts, buttons, spacing, header, top bar, footer, breadcrumbs, navigation, favicon and more. | Appearance → Theme Options | Whole site |
| Header and footer | Layouts and behaviour of the top and bottom of every page. | Header & Navigation Layouts, Top Bar, Footer Layouts & Backgrounds | Whole site (header per page can differ) |
| Menus | The links in the header, footer, mobile menu and other places. | Appearance → Menus | Whole site |
| Widgets | Boxes in side areas, footers and shop pages. | Appearance → Widgets | Areas of the site |
| Page design | The content and layout of each page. | Page Builder with the Template Library | One page |
| Page settings | Header and breadcrumb overrides for one page. | Pages | One page |
| Custom code | Your own style rules (inside a style block) or scripts such as analytics, added to the head or the end of every page. | Settings → Integration | Whole site |
Work from the top down
Import or choose a template first, then Theme Options (colours, fonts), then header and footer, then menus, then individual pages. Doing it the other way round means redoing page work whenever you change a colour or font.
You save a setting → TruCMS rebuilds the theme stylesheet → The site’s caches are refreshed → Visitors’ browsers load the new files
Colours, fonts and spacing are compiled into a stylesheet each time you save Theme Options (or import a template). Text and layout come from the database. Several caches sit between your change and what a visitor sees, so a change can look “unchanged” for a while:
| Cache | Where it lives | How to clear it |
|---|---|---|
| Theme stylesheet | On your server | Theme Options → Advanced Settings → Regenerate Theme CSS. |
| Page (response) cache | On your server, if enabled | Settings → Cache — clear the cache. See the FAQ. |
| Browser cache | Each visitor’s browser (and yours) | Hard-refresh (Ctrl+F5 / Cmd+Shift+R) or open a private window. |
| CDN or proxy | Your CDN (if you use one) | Purge its cache in the CDN dashboard; see Cache for the CDN push option. |
Changing an option never rewrites your pages, posts, products, bookings or payments. It can, however, change where things appear: assigning a different menu to the header changes the links visitors see, and a header preset that is taller moves the content down.
| Symptom | What to do |
|---|---|
| I saved colours but the site still looks the same | Regenerate the theme CSS, clear the page cache, then hard-refresh. If you use a CDN, purge it. See the FAQ. |
| The Page Builder shows different colours from the live page | Reload the editor after saving Theme Options; the builder uses the same stylesheet. |
| A template changed my look and I want mine back | Import the template again in keep mode only if you exported your own first. Otherwise restore from a backup. See Website Templates. |
| I cannot find a theme upload button | There is none. Echo is the theme of the public site; the look is changed through the layers above. |
Echo Theme Options · Website Templates · Header & Navigation Layouts · Footer Layouts & Backgrounds · Cache