Reference / Settings Reference
Settings Reference
Every field of the Yavi Theme backend module, exactly as the extension defines it in yavi_core/Configuration/Sets/Full/settings.definitions.yaml. The Default column is yavi_core's own default — the value a site gets when neither the theme nor the site sets anything. A theme (yavi_lucerne) overrides many of these in its own Set, so what you see in the module may differ; that is intended.
Leaving a field empty never means "no value" — it means "use the value that comes from the layer below" (theme Set, then yavi_core).
i
Generated from the shipped definitions. Field count: 100.
Design / Colors
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Primary color | plugin.bootstrap_package.settings.scss.primary | color | #2F3E50 | Main theme color (navigation, buttons, accents). |
| Secondary color | plugin.bootstrap_package.settings.scss.secondary | color | #7C8B99 | Second accent color (icons, links, hover effects). |
| Tertiary color | plugin.bootstrap_package.settings.scss.tertiary | color | #2B3644 | Dark section background — used by frame-background-tertiary, card-panel-tertiary, carousel-item-layout-tertiary and .btn-tertiary. Text on it is rendered white, so keep it dark. |
| Quaternary color | plugin.bootstrap_package.settings.scss.quaternary | color | #3C4A5C | Second dark section background — used by frame-background-quaternary, card-panel-quaternary, carousel-item-layout-quaternary and .btn-quaternary. Text on it is rendered white, so keep it dark. |
| Success | plugin.bootstrap_package.settings.scss.success | color | #198754 | Status color for success / positive feedback. |
| Info | plugin.bootstrap_package.settings.scss.info | color | #0dcaf0 | Status color for informational messages. |
| Warning | plugin.bootstrap_package.settings.scss.warning | color | #ffc107 | Status color for warnings. |
| Danger | plugin.bootstrap_package.settings.scss.danger | color | #dc3545 | Status color for errors / negative feedback. |
| Headline word color | page.theme.cssvar.themeWordcolor | color | #5C6B7A | Color for highlighted words inside headlines. |
| Primary dark | page.theme.cssvar.themePrimaryDark | string | _empty_ | Darker shade of the primary colour. Leave empty to derive it (theme default #071739) from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Primary light | page.theme.cssvar.themePrimaryLight | string | _empty_ | Lighter shade of the primary colour. Leave empty to derive it (theme default #2f5495) from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Footer background | page.theme.cssvar.themeBgFooter | string | _empty_ | Footer background. Leave empty to derive it (theme default #01193f) from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Muted text | page.theme.cssvar.themeMuted | string | _empty_ | Muted / secondary text colour. Leave empty to derive it (theme default #647289) from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Primary gradient | page.theme.cssvar.bgGradientPrimary | string | _empty_ | Primary background gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Secondary gradient | page.theme.cssvar.bgGradientSecondary | string | _empty_ | Secondary background gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Topbar gradient | page.theme.cssvar.topbarGradient | string | _empty_ | Topbar gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Topbar font colour | page.theme.cssvar.topbarColor | string | _empty_ | Colour of the text and icons in the narrow strip above the header — contact details on the left, social links on the right. Leave empty for white, which is what the dark default topbar needs. Fill it when you give the topbar a light background. |
| Navigation font colour | page.theme.cssvar.navText | string | _empty_ | Colour of the menu text, shared by every navigation variant — the desktop bar, the hamburger panels, the mobile overlay and the search field. Leave empty for white, which is what the dark default header needs. Fill it when the header background is light, otherwise the menu is white on white. |
| Header background | page.theme.cssvar.navbarGradient | string | _empty_ | Background of the site header (#page-header.header-modern), shared by all desktop navigation variants. Leave empty to derive it from Primary — then one colour change in the root fields recolours the header too. Fill it only to pin this one value against the derivation. |
| Primary button gradient | page.theme.cssvar.btnGradientPrimary | string | _empty_ | Primary button gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Secondary button gradient | page.theme.cssvar.btnGradientSecondary | string | _empty_ | Secondary button gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Primary button gradient (hover) | page.theme.cssvar.btnGradientPrimaryHover | string | _empty_ | Primary button gradient on hover. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Secondary button gradient (hover) | page.theme.cssvar.btnGradientSecondaryHover | string | _empty_ | Secondary button gradient on hover. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Header BG (primary) | page.theme.cssvar.headerGradientPrimary | string | _empty_ | Primary carousel header background band behind slider headings (supports transparency). Leave empty to use the theme's own band. |
| Header BG (secondary) | page.theme.cssvar.headerGradientSecondary | string | _empty_ | Secondary carousel header background band behind slider headings (supports transparency). Leave empty to use the theme's own band. |
| Headline gradient (primary) | page.theme.cssvar.headlineGradientPrimary | string | _empty_ | Primary headline gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
| Headline gradient (secondary) | page.theme.cssvar.headlineGradientSecondary | string | _empty_ | Secondary headline gradient. Leave empty to derive it from Primary/Secondary — then one colour change in the two root fields recolours the whole theme. Fill it only to pin this one value against the derivation. |
Layout
Tab: Logo
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Logo | page.logo.file | string | EXT:yavi_core/Resources/Public/Images/logo.svg | Path to the logo, e.g. EXT:your_theme/Resources/Public/Images/logo.svg. Leave blank to use the website title instead. |
| Logo (inverted) | page.logo.fileInverted | string | EXT:yavi_core/Resources/Public/Images/logo-inverted.svg | Path to the inverted logo, used on dark backgrounds. Leave blank to use the website title instead. |
| Logo height | page.logo.height | number | 52 | Height of the logo in the normal, unscrolled desktop header, in pixels. The shrunken header uses 'Logo height (scrolled)' and the mobile header the two mobile fields below. Height and width span the box the logo is fitted into: an SVG keeps its aspect ratio inside that box, so raising the height alone adds empty space above and below unless the width is raised with it. |
| Logo width | page.logo.width | number | 180 | Width of the logo box in pixels, see the note on the height above. |
| Logo height (scrolled) | page.theme.cssvar.navbarTransitionLogoHeight | string | _empty_ | Logo height in the shrunken header, i.e. after the page has been scrolled, e.g. 48px. Pairs with 'Navbar height (scrolled)' on the Navigation page under Sizes & rounding. Leave empty to use the theme's own value. |
| Logo height (mobile header) | page.theme.cssvar.navbarBrandImageMobileHeight | string | _empty_ | Logo height below 992px, e.g. 64px. Applies to the logo in the header itself; the mobile navigation variants use the field below. Leave empty to use the theme's own value. |
| Logo height (mobile navigation) | page.logo.heightMobile | number | 60 | Logo height used in the Navigation Art Mobile header (Bottom Sheet, Orbit FAB, N4). Falls back to the desktop 'Logo height' above when left at 0. |
| Footer logo height | page.logo.footerHeight | number | 0 | Height of the inverted logo in the footer, in pixels. Leave it at 0 to use the header logo's height — the footer then follows the header, which is what most sites want. Set it when the footer needs a different size, for instance because the inverted logo carries a slogan the header version does not. |
| Footer logo width | page.logo.footerWidth | number | 0 | Width of the inverted logo in the footer, in pixels. Leave it at 0 to use the header logo's width. Height and width span the box the logo is fitted into: an SVG keeps its aspect ratio inside that box, so raising one alone adds empty space on the other axis. |
Tab: Container
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Container max width | page.theme.cssvar.containerMaxWidth | string | _empty_ | Maximum content width, e.g. 1320px. Leave empty to use the theme's own value. |
| Wide container side padding | page.theme.cssvar.containerWidePaddingX | string | _empty_ | Horizontal padding of wide sections, e.g. 12vw. Leave empty to use the theme's own value. |
| Content block gap | page.theme.cssvar.contentContainerGap | string | _empty_ | Gap between content blocks, e.g. 3rem. Leave empty to use the theme's own value. |
Tab: Section spacing
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Section spacing XS | page.theme.cssvar.sectionSpacingXs | string | 1rem | Vertical spacing of a section using the XS step, e.g. 1rem. Editors pick the step per content element; this sets what the step means. Below 768px all five steps collapse to one mobile value, so the difference between them is a desktop matter. |
| Section spacing SM | page.theme.cssvar.sectionSpacingSm | string | 3rem | Vertical spacing of a section using the SM step, e.g. 3rem. Below 768px all five steps collapse to one mobile value. |
| Section spacing MD | page.theme.cssvar.sectionSpacingMd | string | 5rem | Vertical spacing of a section using the MD step, e.g. 5rem. Below 768px all five steps collapse to one mobile value. |
| Section spacing LG | page.theme.cssvar.sectionSpacingLg | string | 7rem | Vertical spacing of a section using the LG step, e.g. 7rem. Below 768px all five steps collapse to one mobile value. |
| Section spacing XL | page.theme.cssvar.sectionSpacingXl | string | 9rem | Vertical spacing of a section using the XL step, e.g. 9rem. Below 768px all five steps collapse to one mobile value. |
Tab: Fonts
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Font family | page.theme.cssvar.fontFamily | string | _empty_ | Base font stack for the whole theme. Leave empty to use the theme's own stack. |
| Google Font — primary (self-hosted) | page.theme.font.googleFamily | string | _empty_ | Name of a Google font to self-host GDPR-compliant: it is downloaded and served locally as woff2, with no request to Google in the delivered HTML. Applied to headings, and to the whole theme unless a body font is set below. Leave empty to keep the font stack above. Example: Poppins |
| Google Font — primary weights | page.theme.font.googleWeights | string | 400;600;700 | Semicolon-separated font weights to download for the primary font, e.g. 400;600;700. |
| Google Font — body (self-hosted) | page.theme.font.googleFamilyBody | string | _empty_ | Optional second Google font, self-hosted the same way, used for body text only (headings keep the primary font). Leave empty to use the primary font everywhere. Example: Inter |
| Google Font — body weights | page.theme.font.googleWeightsBody | string | 400;600;700 | Semicolon-separated font weights to download for the body font, e.g. 400;600;700. |
Tab: Headings
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Font size H1 | page.theme.cssvar.fontSizeH1 | string | _empty_ | Size of H1 headings. Takes a fixed value such as 50px or a fluid one such as clamp(35px, 4vw, 50px), which is what the theme ships. Leave empty to use the theme's own value. |
| Font size H2 | page.theme.cssvar.fontSizeH2 | string | _empty_ | Size of H2 headings, fixed (e.g. 40px) or fluid (e.g. clamp(28px, 4vw, 40px)). Leave empty to use the theme's own value. |
| Font size H3 | page.theme.cssvar.fontSizeH3 | string | _empty_ | Size of H3 headings, fixed or fluid via clamp(). Leave empty to use the theme's own value. |
| Font size H4 | page.theme.cssvar.fontSizeH4 | string | _empty_ | Size of H4 headings, fixed or fluid via clamp(). Leave empty to use the theme's own value. |
| Font size H5 | page.theme.cssvar.fontSizeH5 | string | _empty_ | Size of H5 headings, fixed or fluid via clamp(). Leave empty to use the theme's own value. |
| Font size H6 | page.theme.cssvar.fontSizeH6 | string | _empty_ | Size of H6 headings, fixed or fluid via clamp(). Leave empty to use the theme's own value. |
| Heading font weight | page.theme.cssvar.fontWeightHeading | select ((empty), 300, 400, 600, 700) | _empty_ | Font weight for every heading. Whether a weight is actually visible depends on the loaded font — if it does not carry the cut, the browser picks the nearest one and Light looks like Normal. Leave empty to use the theme's own value. |
Tab: Buttons
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Button radius | page.theme.cssvar.btnBorderRadius | string | _empty_ | Corner radius of buttons, e.g. 6px. The value is still multiplied by the button rounding factor above, so it is the shape at factor 1. Leave empty to use the theme's own value. |
| Secondary button radius | page.theme.cssvar.btnSecondaryBorderRadius | string | _empty_ | Own corner radius for secondary buttons, e.g. 45px for a pill. Leave empty and they take the same radius as every other button. |
| Button padding X | page.theme.cssvar.btnPaddingX | string | _empty_ | Horizontal padding inside a button, e.g. 40px. Sets the button's width around its label. Leave empty to use the theme's own value. |
| Button padding Y | page.theme.cssvar.btnPaddingY | string | _empty_ | Vertical padding inside a button, e.g. 15px. Note that buttons also carry a minimum height, so a small value may not make them shorter. Leave empty to use the theme's own value. |
| Button rounding (factor) | page.theme.cssvar.radiusScaleBtn | string | _empty_ | Same scale, but only for buttons and the navigation pills. Leave empty and buttons follow the corner rounding above. |
Tab: Corners & radii
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Corner rounding (factor) | page.theme.cssvar.radiusScale | string | _empty_ | Scales every rounded corner at once — 1 keeps the theme's own shape, 0 makes everything square, 2 doubles it. A factor instead of a pixel value, so cards, buttons and small chips keep their proportions to each other. Leave empty to use the theme's own value. |
| Global element radius | page.theme.cssvar.bsBorderRadius | string | _empty_ | Global border radius, e.g. 15px. Leave empty to use the theme's own value. |
| Card Border Radius | page.theme.cssvar.cardRadius | string | _empty_ | Corner radius for every card surface (card groups, panels, team, pricing, charts, progress, swiper, partner, menu cards), e.g. 25px. Icons, badges and avatars keep their own shapes. Leave empty to use the theme's own value. |
Navigation
Its own page. Until now the same thirteen fields sat in two tabs that were both called Navigation — the sizes under Layout, the variant and the switches under Config — while steering each other across that gap.
Tab: Variants
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Navigation Art Desktop | plugin.bootstrap_package.settings.scss.navigationart | select (MainNavigation, SplitedNavigation, HamburgerNavigation, HamburgerD2, HamburgerD3) | MainNavigation | Navigation layout used from 992px upwards. Each variant brings its own markup and its own stylesheet, and only the selected one is compiled — after changing this, flush the cache so the CSS is rebuilt. |
| Navigation Art Mobile | plugin.bootstrap_package.settings.scss.navigationartmobile | select (BottomSheetNavigation, OrbitFabNavigation, NavigationN4) | BottomSheetNavigation | Navigation layout used below 992px. As with the desktop variant, only the selected one is compiled, so flush the cache after changing it. |
| Hamburger Overlay Brand Label | page.navigation.overlayBrandLabel | string | _empty_ | Small uppercase label shown above the address block in the Hamburger Navigation overlay (e.g. your site name). Leave blank to hide it. |
Tab: Behaviour
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Fixed Navigation | page.theme.navigation.fixed | bool | True | Keeps the header in view while the page scrolls. Off lets it scroll away with the content. |
| Fixed Navigation Transition | page.theme.navigation.fixedtrnsition | bool | False | Lets the header shrink once the page is scrolled. Belongs with the fixed header above, and its target sizes are 'Navbar height (scrolled)' under Sizes & rounding and 'Logo height (scrolled)' on the Layout page under Logo. |
| Wide Navigation | page.theme.navigation.wide | bool | False | Lets the navigation use the full window width instead of the centred container. Affects the navigation row only, not the content below it. |
Tab: Sizes & rounding
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Navbar height | page.theme.cssvar.navbarHeight | string | _empty_ | Header height, e.g. 165px. Leave empty to use the theme's own value. |
| Navbar height (scrolled) | page.theme.cssvar.navbarTransitionHeight | string | _empty_ | Header height after scrolling. Only has an effect with 'Fixed Navigation Transition' switched on under Behaviour. Leave empty to use the theme's own value. |
| Dropdown & mega menu rounding | page.theme.cssvar.navMenuRadius | string | _empty_ | Corner radius of everything that opens out of the navigation — dropdown and mega menu panels, every entry inside them, the link and preview tiles, and the language menu, e.g. 12px. The links in the bar itself follow the field below. Leave empty to use the theme's own value. |
| Navigation buttons & pills rounding | page.theme.cssvar.navControlRadius | string | _empty_ | Corner radius of the controls in the navigation bar — nav links including their active background, the language pill and the highlighted button, e.g. 8px. One value for all three, because they sit side by side. Leave empty to use the theme's own value. |
Tab: Language & search
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Language switcher in the navigation | page.theme.language.enable | bool | True | Shows the language links in the navigation — every variant renders them. Turn it off on a single-language site: the switcher would otherwise show one lonely entry that changes nothing. The setting belongs to bootstrap_package and is repeated here only so it appears in this module; switching it off in either place has the same effect. |
| Search in the navigation | page.theme.search.enable | bool | False | Shows a magnifier in the navigation that opens a search field. Every navigation variant supports it. The theme supplies the input only — the target page below has to carry a search plugin, otherwise the query lands on a page that cannot answer it. |
| Search results page | page.theme.search.targetPageUid | int | 0 | Page id the search submits to — the page holding your search plugin, e.g. indexed_search. Leave at 0 and the query goes to the page the visitor is on, which will not show results. |
Custom CSS
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Custom CSS Classes | page.theme.customCssClasses | string | border-radius-6, border-radius-12, box-shadow-1, img-shadow, padding-5 | Comma-separated list of class names an editor can pick per content element. This registers names only — the matching CSS rule has to exist in the theme, otherwise the option is offered but does nothing. Shipped and styled by yavi_core: border-radius-6, border-radius-12, box-shadow-1, img-shadow, padding-5. |
Config
Tab: Config
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Header Comment | config.headerComment | string | _empty_ | Free text placed as an HTML comment at the top of every page's source, typically a credit or contact line. Rendered by Bootstrap Package into config.headerComment — visible only to someone viewing the page source. |
| Enable Topbar | page.topbar_enabled | bool | True | Master switch for the thin bar above the navigation. Off means the bar is not rendered at all, no matter what the two content fields below hold. |
| Topbar Left | page.topbar | string | _empty_ | UID of the content element shown in the LEFT half of the topbar, typically contact details. Enter the number only, e.g. 24 — it is the content element's uid, not a page id. Empty leaves that half blank. |
| Topbar Right | page.socialtopbar | string | _empty_ | UID of the content element shown in the RIGHT half of the topbar, typically social links. Enter the number only. Empty leaves that half blank. |
| Sticky Bar | page.stickybar | string | _empty_ | UID of a content element rendered as a bar that stays in view while scrolling. Enter the number only. Empty means no sticky bar. |
| Footer Slogan Element | page.footerslogan | string | _empty_ | Content element UID rendered under the footer logo (leave empty to disable). |
| Footer Content Page | page.footer.pid | string | _empty_ | UID of the page whose content fills the five footer columns, read from column positions 901 to 905. Unlike the fields above this is a page id, not a content element uid. Empty renders an empty footer rather than failing. Point it at your own page if you move or rebuild the footer. |
Tab: Contact
These fields feed the structured data of the site (schema.org/Organization), not the footer — contact details on the page itself are maintained as content. Every one of them is optional: what stays empty falls back to the contact data of the theme, and what has no fallback either is left out of the markup instead of being guessed.
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Type of organisation | page.organization.type | string | Organization | How search engines should classify the operator of this site. Allowed: Organization, LocalBusiness, AutoDealer, AutoRepair, Store. A car dealership belongs under AutoDealer, an agency under Organization. Anything unknown falls back to Organization. |
| Name of the organisation | page.organization.name | string | _empty_ | Name under which the operator appears in search results, e.g. the company with its legal form. Empty uses the contact name under Contact, and failing that the website title. |
| Street and number | page.organization.street | string | _empty_ | Street of the postal address in the structured data. Empty uses the address under Contact, whose second line is read as "postcode town". |
| Postcode | page.organization.postalCode | string | _empty_ | Postcode of the postal address. Only takes effect together with the two fields around it: as soon as one of the three carries a value, the address under Contact is no longer used. |
| Town | page.organization.city | string | _empty_ | Town of the postal address. See the note on the postcode. |
| Country | page.organization.country | string | _empty_ | Two-letter country code of the address, e.g. CH, DE, AT. Empty uses the country under Contact. Alone it produces nothing: without a street or a town no address is written at all. |
| Telephone | page.organization.telephone | string | _empty_ | Telephone number in the structured data, best in international form, e.g. +41 41 000 00 00. Empty uses the telephone number under Contact. |
page.organization.email | string | _empty_ | E-mail address in the structured data. Empty uses the e-mail address under Contact. | |
| Logo for search engines | page.organization.logo | string | _empty_ | Logo search engines show next to results, e.g. EXT:your_theme/Resources/Public/Images/logo.png or a full address. Empty uses the theme logo under Layout > Logo. Google reads raster images here — an SVG is accepted by schema.org but not shown by Google. |
Tab: Social Media
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Profiles on other sites | page.organization.sameAs | string | _empty_ | Full addresses of the profiles belonging to this organisation — LinkedIn, Facebook, Instagram, YouTube, Wikipedia. One per line or separated by commas. Empty uses the channels of the theme. They tell a search engine that those profiles and this site are the same operator; anything that is not a valid address is dropped. |
Tab: Tracking
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Google Tag Manager | page.tracking.google.tagManagerContainerId | string | _empty_ | Google Tag Manager Container ID |
| Matomo URL | page.tracking.matomo.url | string | _empty_ | Host of your Matomo instance WITHOUT protocol and without a trailing slash, e.g. analytics.example.com — the script builds //<host>/matomo.php from it. The tracking code is only embedded while this field is filled. |
| Matomo ID | page.tracking.matomo.id | string | _empty_ | Site ID this website has inside Matomo — the number from Matomo's 'Websites' list, not the page id in TYPO3. |
Licence
| Field | Setting key | Type | Default | What it does |
|---|---|---|---|---|
| Licence Key | licence.key | string | _empty_ | Your Yavi theme licence key (see your purchase confirmation e-mail). |
| Product Code | licence.product | string | _empty_ | The product this licence is for, e.g. yavi-lucerne. |