Theme Options control the look of the whole public website: colours, fonts, spacing, header, top bar, navigation, breadcrumbs and footer. This is the complete reference for every option the Echo theme registers.
Appearance → Theme Options. The tabs on the left group the options; Save Changes stores them and rebuilds the theme stylesheet.
The public website is rendered by the Echo theme (version 2.0.0). Every visual choice you make here is saved as a theme option. When you press Save Changes, TruCMS compiles your values into a stylesheet, so the new colours, fonts and spacing apply to every page at once, including the page builder canvas, so what you edit looks like what visitors see.
| Action | What it does |
|---|---|
| Save Changes | Stores the options of all tabs and regenerates the theme stylesheet. Tabs are only a way to organise the form; you can change several tabs and save once. |
| Reset Theme Options | On the Advanced Settings tab. Removes every saved override and the generated stylesheet so the site returns to the theme’s defaults. You are asked to confirm. |
| Regenerate Theme CSS | On the Advanced Settings tab. Forces the stylesheet to be rebuilt from the saved options. Use it after an update, after rebuilding frontend assets, or when colours look out of date. |
Importing a website template sets these options for you
Importing a website template replaces the template’s “look” options — palette, fonts, header, top bar and footer — so you start from a coherent design and fine-tune it here.
Per-page overrides
A few options can be overridden for one page in that page’s own settings (header style, sticky header, breadcrumbs and similar). See Pages. Page overrides win over the values on this screen.
Open Appearance → Theme Options. It requires the manage settings permission.
The default palette of the website. Brand colours drive buttons, links, active states and focus rings; the surface, text and gray colours drive everything else. Colour fields accept hex values such as #345D32 and, where shown, rgba() values.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Primary color | Color | #345D32 | Sets the main brand color used by primary controls, active states, focus rings, and derived primary variants. | |
| Secondary color | Color | #9CAC55 | Sets the secondary color used by the light frontend theme and matching contextual components. | |
| Success color | Color | #97CE97 | Sets the success color used by the light frontend theme and matching contextual components. | |
| Info color | Color | #A6F2DE | Sets the info color used by the light frontend theme and matching contextual components. | |
| Warning color | Color | #C69045 | Sets the warning color used by the light frontend theme and matching contextual components. | |
| Danger color | Color | #AD5252 | Sets the danger color used by the light frontend theme and matching contextual components. | |
| Light color | Color | #F7F9F4 | Sets the light color used by the light frontend theme and matching contextual components. | |
| Body background | Color | #FFFFFF | Sets the body background used by the light frontend theme and matching contextual components. | |
| Surface color | Color | #FFFFFF | Sets the surface color used by the light frontend theme and matching contextual components. | |
| Alternate surface | Color | #F7F9F4 | Sets the alternate surface used by the light frontend theme and matching contextual components. | |
| Body text color | Color | #667264 | Sets the body text color used by the light frontend theme and matching contextual components. | |
| Emphasis text color | Color | #202A23 | Sets the emphasis text color used by the light frontend theme and matching contextual components. | |
| Secondary text color | Color | rgba(102, 114, 100, 0.75) | Sets the secondary text color used by the light frontend theme and matching contextual components. | |
| Secondary background | Color | #E9EEE5 | Sets the secondary background used by the light frontend theme and matching contextual components. | |
| Tertiary text color | Color | rgba(102, 114, 100, 0.5) | Sets the tertiary text color used by the light frontend theme and matching contextual components. | |
| Tertiary background | Color | #F7F9F4 | Sets the tertiary background used by the light frontend theme and matching contextual components. | |
| Muted text color | Color | rgba(102, 114, 100, 0.75) | Sets the muted text color used by the light frontend theme and matching contextual components. | |
| Gray 400 | Color | #BEC9B9 | Sets the gray 400 used by the light frontend theme and matching contextual components. | |
| Gray 500 | Color | #8D9C88 | Sets the gray 500 used by the light frontend theme and matching contextual components. | |
| Gray 700 | Color | #4A5549 | Sets the gray 700 used by the light frontend theme and matching contextual components. | |
| Gray 800 | Color | #313C33 | Sets the gray 800 used by the light frontend theme and matching contextual components. | |
| Heading color | Color | #202A23 | Sets the heading color used by the light frontend theme and matching contextual components. | |
| Link color | Color | #345D32 | Sets the default link color across the frontend; related link states follow the configured link palette. | |
| Link hover color | Color | #182B17 | Sets the link hover and keyboard-focus color across frontend content. | |
| Border color | Color | #E9EEE5 | Sets the border color used by the light frontend theme and matching contextual components. | |
| Focus and control shadow color | Color | rgba(52, 93, 50, 0.22) | Sets the visible focus-ring and focused-control shadow color used for keyboard and form interactions. |
Colours used only while the site is displayed in dark mode. They replace the matching light colours for backgrounds, surfaces, text, borders and the gray scale.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Dark color | Color | #202A23 | Sets the dark color used only while the frontend is in dark mode. | |
| Dark mode body background | Color | #141C16 | Sets the body background used only while the frontend is in dark mode. | |
| Dark mode surface | Color | #1B261E | Sets the surface used only while the frontend is in dark mode. | |
| Dark mode body text | Color | #CED8CA | Sets the body text used only while the frontend is in dark mode. | |
| Dark mode heading text | Color | #F7F9F4 | Sets the heading text used only while the frontend is in dark mode. | |
| Dark mode border | Color | rgba(217, 225, 213, 0.14) | Sets the border used only while the frontend is in dark mode. | |
| Dark mode light surface | Color | #263429 | Sets the light surface used only while the frontend is in dark mode. | |
| Dark mode gray 100 | Color | #223027 | Sets the gray 100 used only while the frontend is in dark mode. | |
| Dark mode gray 200 | Color | #2C3A30 | Sets the gray 200 used only while the frontend is in dark mode. | |
| Dark mode gray 300 | Color | #435247 | Sets the gray 300 used only while the frontend is in dark mode. | |
| Dark mode gray 400 | Color | #748276 | Sets the gray 400 used only while the frontend is in dark mode. | |
| Dark mode gray 500 | Color | #9DA99D | Sets the gray 500 used only while the frontend is in dark mode. | |
| Dark mode gray 600 | Color | #B7C1B5 | Sets the gray 600 used only while the frontend is in dark mode. | |
| Dark mode gray 700 | Color | #CCD4CA | Sets the gray 700 used only while the frontend is in dark mode. | |
| Dark mode gray 800 | Color | #E3E8E1 | Sets the gray 800 used only while the frontend is in dark mode. | |
| Dark mode gray 900 | Color | #F7F9F4 | Sets the gray 900 used only while the frontend is in dark mode. |
Fonts, sizes, line heights and letter spacing. Font families are loaded from the font provider automatically; sizes accept any valid CSS length such as 1rem.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Body font family | Font | Inter | Selects the body typeface used by paragraphs, controls, navigation, tables, and other general frontend text. | |
| Heading font family | Font | Manrope | Selects the heading typeface used by H1-H6 headings, display headings, card titles, and heading-style components. | |
| Body font weights | Text | 400,500,600,700 | Lists the body font weights to request from the font provider, such as 400, 500, and 700. | |
| Heading font weights | Text | 500,600,700 | Lists the heading font weights to request from the font provider for headings and display text. | |
| Body font size | Text | 1rem | Sets the CSS font size for body font size; enter a valid CSS length such as 1rem. | |
| Body line height | Text | 1.55 | Sets the line height for body text. | |
| Body letter spacing | Text | 0 | Sets the letter spacing for body text using a valid CSS length. | |
| Heading line height | Text | 1.2 | Sets the line height for heading text. | |
| Heading letter spacing | Text | -.015em | Sets the letter spacing for heading text using a valid CSS length. | |
| H1 font size | Text | 2.5rem | Sets the responsive CSS size used by H1 headings. | |
| H2 font size | Text | 2rem | Sets the responsive CSS size used by H2 headings. | |
| H3 font size | Text | 1.625rem | Sets the responsive CSS size used by H3 headings. | |
| H4 font size | Text | 1.375rem | Sets the responsive CSS size used by H4 headings. | |
| H5 font size | Text | 1.125rem | Sets the responsive CSS size used by H5 headings. | |
| H6 font size | Text | 1rem | Sets the responsive CSS size used by H6 headings. |
Container widths, section spacing and whether page titles are shown. Section padding fields accept CSS spacing values for top, right, bottom and left.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Container maximum width | Text | 1320px | Sets container maximum width for the responsive frontend page layout. | |
| Content maximum width | Text | 48rem | Sets content maximum width for the responsive frontend page layout. | |
| Section padding | Spacing | 2.5rem / 0 / 2.5rem / 0 | Sets section padding for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Section padding (mobile) | Spacing | 1.75rem / 0 / 1.75rem / 0 | Sets section padding (mobile) for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Grid gutter | Text | 1.75rem | Sets grid gutter for the responsive frontend page layout. | |
| Show page title | Switch | On | Turns show page title on or off for the frontend. |
Shared look of buttons, cards and form controls: padding, radius, borders and shadows.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Button padding | Spacing | .625rem / 1.125rem / .625rem / 1.125rem | Sets button padding for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Form control minimum height | Text | 2.75rem | Sets form control minimum height for shared frontend components and form controls. | |
| Card padding | Spacing | 1.25rem / 1.25rem / 1.25rem / 1.25rem | Sets card padding for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Border width | Text | 1px | Sets border width for shared frontend components and form controls. | |
| Border radius | Text | .5rem | Sets border radius for shared frontend components and form controls. | |
| Button radius | Text | .5rem | Sets button radius for shared frontend components and form controls. | |
| Card radius | Text | .875rem | Sets card radius for shared frontend components and form controls. | |
| Default shadow | Text | 0 .25rem .75rem rgba(32, 42, 35, .08) | Sets default shadow for shared frontend components and form controls. | |
| Card shadow | Text | 0 .125rem .375rem rgba(32, 42, 35, .08) | Sets card shadow for shared frontend components and form controls. | |
| Border style | Select | Solid | Solid, Dashed, Dotted, None | Selects the border style used by the frontend theme. |
The header layout preset, its menus, button, colours and behaviour. The presets are explained with screenshots in Header & Navigation Layouts.
The Header tab starts with menu assignments and the nine layout presets, each with a miniature preview.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Logged-in User Menu | Menu select | — | Select a menu built in the Menu Builder to display for logged-in users instead of the default account links (Profile, Team, API Tokens, Logout). Only the top-level items are shown; child items are ignored. | |
| Secondary Menu | Menu select | — | Select from the available menus. This menu appears on the right side of the header. | |
| Primary Menu | Menu select | First menu | Select a menu from the available options; this menu is displayed next to the logo in the header. | |
| Header layout preset | Image select | Classic: logo left, navigation right | Classic: logo left, navigation right, Centered brand: logo on top, navigation below, Split navigation: logo in the middle, Floating capsule: rounded detached bar, Minimal: full-screen overlay menu, Store: search-first two-tier header, Service: contact details and call to action, Hanging tab: logo on a tab below the bar, Index: numbered, ruled navigation cells | Selects the complete header structure. Each preset has its own layout and the preview matches the rendered layout. |
| Logo height | Number | 35 | Sets logo height; enter a numeric value within the allowed range. | |
| Header background | Color | #FFFFFF | Sets header background for the frontend header and its responsive variants. | |
| Header text color | Color | #667264 | Sets header text color for the frontend header and its responsive variants. | |
| Header link hover | Color | #345D32 | Sets header link hover for the frontend header and its responsive variants. | |
| Dropdown background (custom menu colors) | Color | #FFFFFF | Background of dropdown menus. Used only when Menu colors is set to Custom colors; otherwise it follows the header background. (Shown only when its related option is selected.) | |
| Mega menu background (custom menu colors) | Color | #FFFFFF | Background of mega menus. Used only when Menu colors is set to Custom colors; otherwise it follows the header background. (Shown only when its related option is selected.) | |
| Mobile menu background (custom menu colors) | Color | #FFFFFF | Background of the mobile menu. Used only when Menu colors is set to Custom colors; otherwise it follows the header background. (Shown only when its related option is selected.) | |
| Menu colors | Select | Follow the header colors | Follow the header colors, Custom colors | Dropdowns, mega menus and the mobile menu use the header background, text and hover colors. Choose Custom colors to set them separately. |
| Header button text | Text | — | Text of the call-to-action button in the header. Leave empty to hide the button; the Service layout shows "Contact us" when this is empty. | |
| Header button link | Text | — | Where the header button goes, for example /contact-us or a full URL. | |
| Account button | Select | Show | Show, Hide | The account icon in the header opens the sign-in page for visitors and the account menu for members. Hide it on a site with no booking, shop or member area. The cart icon follows the TruCommerce store setting. |
| Contact card icon | Select | Phone | Phone, Email, WhatsApp, Location, Opening hours | Icon shown in the contact card of the Service header. (Shown only when its related option is selected.) |
| Contact card label | Text | — | Small line above the contact details in the Service header. (Shown only when its related option is selected.) | |
| Contact card details | Text | — | Main line of the contact card in the Service header. (Shown only when its related option is selected.) | |
| Contact card link | Text | — | Where the contact card goes when clicked. (Shown only when its related option is selected.) | |
| Sticky header | Switch | Off | Turns sticky header on or off for the frontend. | |
| Header shadow | Switch | On | Turns header shadow on or off for the frontend. | |
| Dark header | Switch | Off | Sets the dark header used only while the frontend is in dark mode. | |
| Open desktop submenus on hover | Switch | On | Turns open desktop submenus on hover on or off for the frontend. | |
| Full width header | Select | Contained | Contained, Full width | Selects how full width header is rendered in the site header. |
| Show search in header | Switch | Off | Shows a search button in the Centered header. The Store header always has a search field. (Shown only when its related option is selected.) | |
| Header shape | Select | Flat | Flat, Rounded | Selects how header shape is rendered in the site header. |
An optional slim bar above the header with text or a menu on each side. See Top Bar.
The Top Bar tab. Options below Show top bar appear only after you switch it on.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Show top bar | Switch | Off | Shows a slim bar above the header with text or a menu on its left and right sides. | |
| Show top bar on mobile | Switch | Off | The top bar is hidden on small screens unless this is on. (Shown only when its related option is selected.) | |
| Left side content | Radio | Text | Text, Menu | Show a line of text or a menu on the left side of the top bar. (Shown only when its related option is selected.) |
| Left side text | Text area | — | Text for this side of the top bar. Other HTML is removed. (Shown only when its related option is selected.) | |
| Right side content | Radio | Text | Text, Menu | Show a line of text or a menu on the right side of the top bar. (Shown only when its related option is selected.) |
| Right side text | Text area | — | Text for this side of the top bar. Other HTML is removed. (Shown only when its related option is selected.) | |
| Top bar background | Color | #202A23 | Background color of the top bar. (Shown only when its related option is selected.) | |
| Top bar text color | Color | #CED8CA | Text color of the top bar. (Shown only when its related option is selected.) | |
| Top bar link color | Color | #FFFFFF | Color of links inside the top bar text. (Shown only when its related option is selected.) | |
| Top bar link hover | Color | #A6F2DE | Hover color of links inside the top bar text. (Shown only when its related option is selected.) | |
| Top bar menu color | Color | #E3E8E1 | Color of top bar menu items. Menus here use this, not the link color. (Shown only when its related option is selected.) | |
| Top bar menu hover | Color | #A6F2DE | Hover and active color of top bar menu items. (Shown only when its related option is selected.) | |
| Top bar border | Color | #2C3A30 | Divider line under the top bar. (Shown only when its related option is selected.) | |
| Left side menu | Menu select | — | The menu shown on the left of the top bar when Left side content is set to Menu. | |
| Right side menu | Menu select | — | The menu shown on the right of the top bar when Right side content is set to Menu. |
Behaviour of dropdown and mega menus: width, default columns and hover delays. Individual menu items can override mega-menu settings in the menu builder.
Navigation options control mega menu width and the hover delays of dropdowns.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Mega menu width | Select | Container width | Content width, Container width, Full viewport, Custom width | Selects how mega menu width behaves in desktop and responsive navigation. |
| Mega menu custom width | Text | 960px | Sets mega menu custom width for desktop, dropdown, mega-menu, and responsive navigation where applicable. | |
| Default mega menu columns | Number | 4 | Sets default mega menu columns; enter a numeric value within the allowed range. | |
| Submenu open delay (ms) | Number | 120 | Sets submenu open delay (ms); enter a numeric value within the allowed range. | |
| Submenu close delay (ms) | Number | 220 | Sets submenu close delay (ms); enter a numeric value within the allowed range. |
The breadcrumb strip and page title band shown at the top of inner pages: visibility, size, background image, overlay and colours. Individual pages can override these in their own page settings.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Show breadcrumbs | Switch | On | Turns show breadcrumbs on or off for the frontend. | |
| Show on mobile | Switch | On | Turns show on mobile on or off for the frontend. | |
| Show page title | Switch | On | Turns show page title on or off for the frontend. | |
| Container width | Select | Full width | Full width, Contained | Selects the container width behavior for the frontend breadcrumb area. |
| Alignment | Select | Start | Start, Center, End | Selects the alignment behavior for the frontend breadcrumb area. |
| Height | Select | Automatic | Automatic, Compact, Comfortable, Large, Hero | Selects the height of the breadcrumb area. |
| Minimum height | Select | Comfortable | None, Compact, Comfortable, Large, Hero | Selects the minimum height of the breadcrumb area. |
| Breadcrumb padding | Spacing | .5rem / 0 / .5rem / 0 | Sets breadcrumb padding for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Breadcrumb margin | Spacing | 0 / 0 / 1rem / 0 | Sets breadcrumb margin for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Font size | Select | Default | Small, Default, Medium, Large | Selects the breadcrumb text size. |
| Separator | Select | Chevron | Chevron, Arrow, Slash, Dot | Selects the separator displayed between breadcrumb items. |
| Separator size | Select | Default | Small, Default, Medium, Large | Selects the breadcrumb separator size. |
| Separator spacing | Select | Default | Tight, Default, Relaxed, Wide | Selects the spacing around the breadcrumb separator. |
| Background color | Color | transparent | Sets background color for the breadcrumb area shown on frontend pages. | |
| Background image | File upload | — | Uploads or selects the image used for background image; leave empty to use the configured background color. | |
| Background position | Select | Center | Center, Top center, Bottom center, Left center, Right center | Selects the position of the breadcrumb background image. |
| Background size | Select | Cover | Cover, Contain, Original size, Fit width, Fit height | Selects how the breadcrumb background image is sized. |
| Background repeat | Select | No repeat | No repeat, Repeat, Repeat horizontally, Repeat vertically | Selects the background repeat behavior for the frontend breadcrumb area. |
| Overlay color | Color | #000000 | Sets overlay color for the breadcrumb area shown on frontend pages. | |
| Overlay opacity | Range | 0 | Adjusts overlay opacity within the allowed range. | |
| Text color | Color | rgba(102, 114, 100, 0.75) | Sets text color for the breadcrumb area shown on frontend pages. | |
| Link color | Color | #345D32 | Sets link color for the breadcrumb area shown on frontend pages. | |
| Hover color | Color | #182B17 | Sets hover color for the breadcrumb area shown on frontend pages. | |
| Active item color | Color | rgba(102, 114, 100, 0.75) | Sets active item color for the breadcrumb area shown on frontend pages. | |
| Border | Select | No border | No border, Soft border, Primary border | Selects a predefined standard-based border treatment. |
| Border radius | Select | Square | Square, Subtle, Soft, Rounded, Extra rounded | Selects a predefined standard border radius. |
| Shadow | Select | No shadow | No shadow, Shadow soft, Shadow balanced, Shadow strong | Selects a predefined standard shadow treatment. |
Footer layout, background (solid, gradient or image), top-edge shape, colours, widget columns, copyright bar and footer menu. See Footer Layouts & Backgrounds.
The Footer tab lists the widget layouts as miniature previews, followed by shape, gradient and background options.
| Setting | Control | Default | Choices | Effect / guidance |
|---|---|---|---|---|
| Background type | Select | Solid color | Solid color, Gradient, Image | What fills the footer: one flat color, a two-color gradient or a picture with an optional dark overlay. The footer background color below also tints the copyright bar, so keep it close to the look you choose. |
| Footer background | Color | #202A23 | Sets footer background for the frontend footer. With a gradient or an image it still tints the copyright bar and shows while the picture loads. | |
| Gradient preset | Image select | Your colors | Your colors, Brand, Aurora, Sunset, Ocean, Midnight, Forest, Ember, Orchid, Graphite | Ready-made gradients. Brand follows the site's primary color; the others are fixed. They are all dark, so keep the footer text light. Choose Your colors to set the colors and direction yourself. (Shown only when its related option is selected.) |
| Gradient start | Color | #202A23 | First color of the footer gradient. For the glow styles this is the color of the glow. (Shown only when its related option is selected.) | |
| Gradient end | Color | #345D32 | Last color of the footer gradient. For the glow styles this is the color the glow fades into. (Shown only when its related option is selected.) | |
| Gradient style | Select | Diagonal | Top to bottom, Left to right, Diagonal, Glow from the top, Glow from the top left corner | Direction of the gradient. Glow styles start with a soft spot of the start color and fade into the end color. (Shown only when its related option is selected.) |
| Background image | File upload | — | Uploads or selects the picture behind the footer. Until one is chosen the footer keeps its background color. (Shown only when its related option is selected.) | |
| Image position | Select | Center | Center, Top center, Bottom center, Left center, Right center | Which part of the picture stays in view when the footer is cropped. (Shown only when its related option is selected.) |
| Image size | Select | Cover | Cover, Contain, Original size | Cover fills the footer, Contain shows the whole picture, Original size keeps its own dimensions (use with a repeat for patterns). (Shown only when its related option is selected.) |
| Image repeat | Select | No repeat | No repeat, Repeat, Repeat horizontally, Repeat vertically | Whether the picture is tiled. Tiling is meant for small patterns. (Shown only when its related option is selected.) |
| Overlay color | Color | #000000 | Color laid over the picture so the footer text stays readable. (Shown only when its related option is selected.) | |
| Overlay opacity | Range | 0.6 | How strongly the overlay covers the picture. 0 shows the picture as it is. (Shown only when its related option is selected.) | |
| Footer text | Color | #F7F9F4 | Sets footer text for the frontend footer. | |
| Footer link | Color | #F7F9F4 | Sets footer link for the frontend footer. | |
| Footer link hover | Color | #A6F2DE | Sets footer link hover for the frontend footer. | |
| Widgets layout | Image select | Equal columns | Equal columns, Wide first column, Centered, Banner above columns, Wide last column, Two by two, Lead with stacked sidebar, Boxed columns, Ruled columns | How the footer widget areas are arranged. Wide first or last column gives Footer Area 1 or the last area more room (a brand block, a sign-up form); Banner turns Footer Area 1 into a full-width band; Centered stacks everything in the middle and shows menus as one row of links; Two by two makes a grid of halves; Lead with stacked sidebar puts Footer Area 1 beside the other areas stacked in one column; Boxed columns puts each area on its own panel; Ruled columns separates the areas with thin lines. |
| Copyright bar width | Select | Contained | Contained, Full width | Whether the copyright text and footer menu line up with the page content (Contained) or stretch to the edges of the screen (Full width). The bar's background always spans the full width. (Shown only when its related option is selected.) |
| Top edge shape | Image select | Flat edge | Flat edge, City skyline, Pine forest, Layered hills, Torn paper, Rising bubbles, Podium steps, Sound bars, Halftone fade, Postage stamp, Wildflower meadow, Sunrise | Cuts the top edge of the footer into a shape. The footer's own background (color, gradient or picture) fills the shape, and the page behind it shows through the gaps. |
| Top edge shape size | Select | Medium | Small, Medium, Large | How tall the shape is. It scales down on small screens. The shape overlaps the bottom of the page content, so keep some space under the last section on the page. (Shown only when its related option is selected.) |
| Footer padding | Spacing | 0 / 0 / 0 / 0 | Sets footer padding for top, right, bottom, and left sides; use valid CSS spacing values. | |
| Footer Widgets | Switch | Off | Enable this option to display customizable widgets in the footer section of your website, enhancing content and functionality across all pages. | |
| Footer Columns | Range | 4 | 1 to 6 | Specify the number of columns for organizing and structuring the layout of widgets in the footer. The footer has four widget areas (Footer Area 1-4), so at most four columns are displayed. |
| Copyright Bar | Switch | Off | Enable this option to display a copyright bar in the footer of your website. This bar typically includes information about intellectual property and ownership. | |
| Language Switch | Switch | Off | Enable this option to display the language selection feature in the footer. Available when the Copyright Bar is on. | |
| Footer Menu | Menu select | — | Select a menu from the available options; this menu will be displayed on the right side in the footer. Available when the Copyright Bar is on. | |
| Copyright Text | Text area | © year DotArtisan. All rights reserved. | The text shown in the copyright bar. Basic HTML such as links is allowed. Available when the Copyright Bar is on. |
Maintenance actions rather than visual options.
The Advanced Settings tab holds the two maintenance actions.
| Action | Guidance |
|---|---|
| Reset Theme Options | Restore all current theme option values to the defaults defined by the active theme. Removes saved theme overrides and the generated dynamic stylesheet; the frontend then uses the default stylesheet. Record important branding values before resetting. |
| Regenerate Theme CSS | Force recompilation of the dynamic stylesheet from the current saved theme options. Use this after rebuilding frontend assets or when you want to force the dynamic stylesheet to be regenerated. |
Reset carefully
A reset discards your customised values and cannot be undone. If you only want to see the default look, export your current site as a template first, or note your colours and fonts.
Header & Navigation Layouts · Top Bar · Footer Layouts & Backgrounds · Menus · Website Templates