Wenn etwas nicht so aussieht wie erwartet

FAQ & Fallstricke

Der Text auf meinem Hintergrundbild ist schlecht lesbar

Overlay und Textfarbe müssen zusammenpassen. Wähle beim Hintergrund eine Variante mit passendem Overlay (z. B. „Overlay dunkel“) und stelle Textfarbe entsprechend ein (dunkles Overlay → Weiß). Prüfe das Ergebnis in der Vorschau; im Design Studio hilft der Schalter Kontraste.

Mein Logo ist auf manchen Hintergründen schlecht zu sehen

Ein Logo in festen Farben kann nicht auf Weiß, auf Schwarz und auf einem farbigen Kopf gleichzeitig gut aussehen. Trage beim Element, das dein Logo zeigt, im Feld CSS-Klasse zusätzlich logo-tint ein. Dann übernimmt das Logo die Farben seiner Umgebung – die Schrift die Textfarbe, das Zeichen die Akzentfarbe – und bleibt in jeder Vorlage und im Dunkelmodus lesbar.

Am besten geht das mit einer SVG, deren Teile benannt sind (logo-mark für das Zeichen, logo-word für den Schriftzug). Eine SVG ohne diese Namen behält ihre eigenen Farben. Ein PNG mit durchsichtigem Hintergrund wird einfarbig in der Textfarbe – das passt nur für einfarbige Logos. Ein JPG bleibt immer, wie es ist.

Tauschst du das Logo gegen ein buntes aus, das seine Farben behalten soll, nimm die Klasse logo-tint wieder heraus.

Ein Regler im Design Studio bewirkt nichts

Sehr wahrscheinlich ist der entsprechende Wert in files/theme/CSS/custom.css fest eingetragen. Diese Datei wird zuletzt geladen und gewinnt gegen das Studio. Marken­farben, Schriften und Maßstäbe gehören ins Studio; in custom.css sollten nur Dinge stehen, die kein Regler abdeckt. Ansprechpartner: die Entwicklung – siehe Für Entwickler.

Ich habe ein Hintergrundbild verschoben – bricht jetzt etwas?

Nein. Contao merkt sich das Bild an einer internen Kennung, nicht am Pfad. Umbenennen und Verschieben in der Dateiverwaltung sind unkritisch. Nur wenn du die Datei löschst, bleibt der Hintergrund leer.

Ich habe im Studio gespeichert – und will zurück

Jedes Speichern legt eine Version an. Öffne die Versionsliste im Studio und stelle einen früheren Stand wieder her. Ganz zurück auf den Theme-Standard: Vorlage Basis wählen und speichern.

Auf einer Seite sind plötzlich alle Farben anders

Vermutlich steht ?persona=… in der Adresszeile (eine Demo-Funktion). Entferne den Teil hinter dem Fragezeichen oder rufe die Seite ohne Parameter auf. ?persona=basic zeigt einmalig den Theme-Standard. Auf Kundenseiten sollte diese Funktion abgeschaltet sein.

Animationen laufen bei mir nicht

Das ist Absicht: Wer im Betriebssystem „Bewegung reduzieren“ aktiviert hat, bekommt keine Bewegungs-Effekte. Auch Hintergrundvideos zeigen dann nur ihr Standbild.

Das Hauptmenü steht rechts statt in der Mitte

Das liegt am Aufbau der Kopfzeile im Seitenlayout, nicht am Theme. Stehen Navigation und ein Knopf zusammen in einer Elementgruppe, zählen sie als ein Teil und rücken gemeinsam nach rechts. Als zwei einzelne Einträge steht die Navigation in der Mitte. Beides ist gewollt möglich – siehe Kopfzeile anordnen.

Auf dem Handy sieht das Layout anders aus

Spalten-Layouts stapeln auf schmalen Bildschirmen automatisch zu einer Spalte, und die Hero-Höhen sind leicht angehoben, damit nichts flach wirkt. Reihenfolge lässt sich per order-first--mobile / order-last--mobile anpassen, Sichtbarkeit per desktop-only / mobile-only.

Nach einer Schrift-Umstellung dauert das erste Speichern länger

Beim Speichern lädt das Studio die gewählte Schrift herunter und legt sie lokal ab (aus Datenschutz- und Performance-Gründen kein externer Font-Dienst). Das passiert nur einmal pro Schrift.

Eine Kollegin sieht den Design-Studio-Knopf nicht

Das Studio ist nur für Administratoren sichtbar. Außerdem kann ein Admin es für den eigenen Zugang ausblenden (Design Studio ausblenden im eigenen Profil).

Muss ich das Design Studio benutzen?

Nein. Es ist der bequeme Weg für das Gesamt-Aussehen, aber ein optionales Zusatz­modul. Wer es weglässt, stellt dieselben Werte von Hand ein (custom.css oder die Theme-Vorgaben) – das macht eine Entwicklerin. Sektionen und Inhaltselemente pflegst du unabhängig davon über die Auswahlfelder im Backend.

Woher weiß ich, was in custom.css steht?

Diese Datei siehst du als Redakteur nicht. Praktisch heißt das: Wenn ein Studio-Regler oder ein Feld nichts bewirkt, ist meist dort ein fester Wert hinterlegt. Melde es der Agentur – sie kann es nachsehen und lösen.

Wie geht mein bearbeiteter Inhalt live?

Anders als das Design Studio: Ein Artikel oder Inhaltselement wirkt, sobald es veröffentlicht ist (grünes Augen-Symbol in der Liste; ein Klick darauf schaltet um) und du gespeichert hast. Unveröffentlichte Elemente sind nur im Backend und in der Vorschau sichtbar. Ganze Seiten haben zusätzlich einen Veröffentlicht-Status.

Wie sehe ich eine Sektion auf dem Handy, bevor sie live ist?

Über den „Vorschau“-Link von Contao (oben in der Backend-Kopfleiste) die Seite öffnen und das Browserfenster schmal ziehen – so stapeln die Spalten wie auf dem Handy. Der „Mobil“-Schalter im Design Studio zeigt nur das Theme, nicht deinen Inhalt.

Ich habe die Einstellungen einer Sektion verstellt – zurück?

Contao führt pro Datensatz eine eigene Versionsgeschichte. Im Bearbeitungsformular oben rechts über „Versionen“ einen früheren Stand des Artikels oder Elements wiederherstellen. (Das ist unabhängig von den Studio-Versionen.)

Meine Studio-Änderung ist im Frontend nicht sofort da

Im Studio selbst wird der neue Stand nach dem Speichern sofort nachgeladen. Auf anderen Tabs oder in anderen Browsern hilft ein Neuladen der Seite. Nur wenn ein Zwischenspeicher hartnäckig ist, muss jemand den Cache leeren (cache:clear) – das ist die Ausnahme, nicht die Regel.

Woran muss ich bei Barrierefreiheit selbst denken?

Das Theme bringt Fokus-Rahmen und Rücksicht auf reduzierte Bewegung mit und hilft dir bei den Kontrasten. Für eine barrierefreie Website bleibst du trotzdem selbst verantwortlich. Achte besonders auf Alt-Texte für Bilder (Feld „Alternativer Text“) und eine sinnvolle Überschriften-Reihenfolge (nicht die Größe zum Optischen missbrauchen – dafür gibt es das Feld Textgröße).

Der Kontrast-Check unter Kontraste misst nur den sichtbaren Text der geöffneten Seite im aktiven Farbschema. Text auf Fotos misst er nur eingeschränkt, Hover- und Fokus-Zustände gar nicht. Er ist eine Hilfe, kein Nachweis, dass die Website barrierefrei ist – prüfe jede Seite in beiden Farbschemata und lass die fertige Website im Zweifel fachkundig prüfen.