When something doesn't look as expected
FAQ & pitfalls
The text on my background image is hard to read
Overlay and text colour have to match. For the Background, choose a variant with a suitable overlay (e.g. “dark overlay”) and set the Text color accordingly (dark overlay → White). Check the result in the preview; in the Design Studio the Contrast switch helps.
My logo is hard to see on some backgrounds
A logo in fixed colours can't look good on white, on black and on a
coloured header at the same time. On the element that shows your logo,
add logo-tint to the CSS class (in the
CSS ID/class field). The logo then takes on
the colours of its surroundings – the lettering the text colour, the
symbol the accent colour – and stays readable in every preset and in dark
mode.
This works best with an SVG whose parts are named
(logo-mark for the symbol, logo-word for the
lettering). An SVG without these names keeps its own colours. A PNG with
a transparent background becomes a single colour in the text colour –
that only suits single-colour logos. A JPG always stays as it is.
If you replace the logo with a colourful one that should keep its
colours, remove the logo-tint class again.
A slider in the Design Studio has no effect
Most likely the corresponding value is hard-coded in files/theme/CSS/custom.css. This file is loaded last and wins against the Studio. Brand colours, fonts and scales belong in the Studio; custom.css should only contain things no slider covers. Who to ask: your developers – see For developers.
I moved a background image – will something break now?
No. Contao remembers the image by an internal ID, not by its path. Renaming and moving in the file manager are harmless. Only if you delete the file does the background stay empty.
I saved in the Studio – and want to go back
Every save creates a version. Open the version list in the Studio and restore an earlier state. All the way back to the theme default: choose the Basic preset and save.
Suddenly all the colours on a page are different
There is probably ?persona=… in the address bar (a demo feature). Remove the part after the question mark or open the page without parameters. ?persona=basic shows the theme default for a single page view. This feature should be switched off on client sites.
Animations don't play for me
That's intentional: anyone who has enabled “Reduce motion” in their operating system gets no motion effects. Background videos then only show their still image, too.
The main menu sits on the right instead of in the middle
That comes from how the header is put together in the page layout, not from the theme. If the navigation and a button share an element group, they count as one part and move to the right together. As two separate entries, the navigation sits in the middle. Both are valid choices – see Arranging the header.
The layout looks different on a phone
Column layouts automatically stack into a single column on narrow
screens, and hero heights are slightly raised so that nothing looks flat.
The order can be adjusted with order-first--mobile /
order-last--mobile, visibility with
desktop-only / mobile-only.
After changing the font, the first save takes longer
On save, the Studio downloads the chosen font and stores it locally (for privacy and performance reasons there is no external font service). This only happens once per font.
A colleague can't see the Design Studio button
The Studio is only visible to administrators. In addition, an admin can hide it for their own account (Hide the Design Studio in their own profile).
Do I have to use the Design Studio?
No. It is the convenient route for the overall look, but an optional add-on module. Anyone who leaves it out sets the same values by hand (custom.css or the theme defaults) – a developer does that. You maintain sections and content elements independently of it via the select menus in the back end.
How do I know what's in custom.css?
As an editor you don't see this file. In practice this means: if a Studio slider or a field has no effect, a fixed value is usually stored there. Report it to the agency – they can look it up and fix it.
How does my edited content go live?
Differently from the Design Studio: an article or content element takes effect as soon as it is published (green eye icon in the list; clicking it toggles the state) and you have saved. Unpublished elements are only visible in the back end and in the preview. Whole pages additionally have a published status of their own.
How do I see a section on a phone before it goes live?
Open the page via Contao's “Preview” link (at the top of the back-end header) and make the browser window narrow – the columns then stack as they would on a phone. The “Mobile” switch in the Design Studio only shows the theme, not your content.
I messed up the settings of a section – how do I go back?
Contao keeps a version history for each record. In the edit form, use “Versions” at the top right to restore an earlier state of the article or element. (This is independent of the Studio versions.)
My Studio change doesn't show up in the front end straight away
In the Studio itself, the new state is reloaded immediately after
saving. In other tabs or other browsers, reloading the page helps. Only
if a cache is stubborn does someone need to clear it
(cache:clear) – that's the exception, not the rule.
What do I still have to take care of myself for accessibility?
The theme comes with focus outlines and respect for reduced motion, and helps you with contrast. You still remain responsible for an accessible website yourself. Pay particular attention to alt texts for images (the “Alternate text” field) and a sensible heading order (don't misuse the level for visual size – that's what the Text size field is for).
The contrast check under Contrast only measures the visible text of the open page in the active colour scheme. Text on photos is measured only to a limited extent, hover and focus states not at all. It is an aid, not proof that the website is accessible – check every page in both colour schemes and, if in doubt, have the finished website reviewed by an expert.