Contao (Teil 11): Die Frontend-Ausgabe gestalten

Bislang wurden im Backend zwar bereits Seiten und Artikel angelegt, die Darstellung im Frontend hat allerdings aus ästhetischer Sicht durchaus noch Potenzial nach oben. Daher wird in den folgenden Tutorials ein ausführlicher Blick auf das CSS-Prinzip von Contao geworfen. Tatsächlich geht Contao hier deutlich weiter als viele andere Systeme. In Contao gibt es nämlich einen CSS-Editor, mit dem sich Stylesheets ganz bequem über das Backend der Seite erstellen lassen. Dieses Tool macht es vor allem auch CSS-Neulingen vergleichsweise einfach, Anpassungen am Layout der Seite vorzunehmen.

Wir empfehlen:
Contao CMS-Training

Keine Frage, für die Gestaltung von Contao-Webseiten wird natürlich auf CSS gesetzt. Hierfür gibt es ganz unterschiedliche Möglichkeiten. Eine der Besonderheiten von Contao ist dabei zweifellos die fest integrierten CSS-Frameworks. Dank dieser Frameworks lässt sich das Design der Seite denkbar einfach anpassen. Wie leistungsfähig diese Frameworks sind, habt ihr übrigens bereits gesehen, als ihr mit dem Layout-Builder das Grundlayout der Seite festgelegt habt.

Ein Beispiel soll zeigen, wie flexibel Contao dank des Layout-Builders tatsächlich ist. Wenn ihr die bisherigen Tutorials verfolgt habt, dürfte euch folgender Anblick vertraut sein:

Das Layout setzt sich u.a. aus einer Kopf- und einer Fußzeile zusammen. Nun kann es natürlich sein, dass ihr euch entscheidet, die Webseite doch lieber ohne Fußbereich anzuzeigen. Bei einer klassischen Webseite müsstest ihr dafür in den HTML- und den CSS-Code der Seite eingreifen. Bei Contao lässt sich das hingegen ganz einfach per Layout-Builder umsetzen. Aufgerufen wird die betreffende Konfiguration über Themes>Die Seitenlayouts des Themes ID xx bearbeiten. Klickt anschließend auf das Stiftsymbol bei Standard-PSD-Layout.

Entscheidend ist der Bereich Zeilen.

Momentan ist der Punkt Kopfzeile, Hauptzeile und Fußzeile eingestellt, was zur gezeigten Ansicht im Frontend führt. Aktiviert nun Kopfzeile und Hauptzeile, speichert das und ruft das Frontend der Seite auf.

Wie ihr seht, ist die Fußzeile tatsächlich verschwunden, ohne dass ihr auch nur eine Zeile Code manuell verändern musstet.

Mit Stylesheets arbeiten

Contao ist auch deswegen so flexibel, was die Layout-Gestaltung betrifft, weil es unterschiedliche Möglichkeiten für die Arbeit mit CSS gibt. Denn tatsächlich könnt ihr eigene CSS-Dateien einfügen, ebenso lassen sich aber auch systeminterne Stylesheets direkt in Contao erstellen. Diese interne Variante verdient natürlich eine genauere Betrachtung, da das auch für CM-Systeme recht ungewöhnlich ist.

Die Schaltzentrale für interne Stylesheets kann man über Layout>Themes und Anklicken des Symbols Die Stylesheets des Themes ID xx bearbeiten aufrufen.

Standardmäßig wird die daraufhin angezeigte Übersicht leer sein. Es gilt nun also, ein neues Stylesheet anzulegen. Folgt dazu dem Link Neues Stylesheet, der im oberen Fensterbereich zu sehen ist. In dem sich öffnenden Fenster wird das Stylesheet definiert. Gebt zunächst einen Namen an. Im aktuellen Fall wird font gewählt.

Weiter geht es im Bereich Medientypen.

Hierüber kann man festlegen, für welchen Anzeigentyp das Stylesheet gedacht ist. Ich belasse den Wert auf all. Dadurch werden die Schriftdefinitionen, die im font-Stylesheet definiert sind, auf alle Anzeigentypen angewendet. Die übrigen Einstellungen kann man mit Speichern und schließen übernehmen.

Damit ist das Stylesheet angelegt und kann mit Inhalten gefüllt werden. Im ersten Schritt gilt es, das Schriftbild anzupassen. Klickt dazu unter Layout>Themes bei Mein PSD-Theme auf Die Stylesheets des Themes ID xx bearbeiten und anschließend auf das Stiftsymbol von font.

Über Neue Formatdefinition wird das relevante Dialogfenster geöffnet. Legt zunächst die Position der neuen Definition fest. Das fällt bei der ersten Definition denkbar leicht; klickt also auf den ersten Abwärtspfeil Oben einfügen.

In dem nun angezeigten Fenster kann man mit der Definition der Stylesheets beginnen. Was ihr hier seht, ist der interne CSS-Editor von Contao. Die Arbeit mit dem mag auf den ersten Blick etwas gewöhnungsbedürftig erscheinen. Gibt man dem Editor aber erst einmal eine Chance, möchte man ihn schon bald nicht mehr missen.

Durch die folgenden Schritte werden die Schriftdefinitionen für die Seite angegeben. Tragt dazu in das Feld Selektor body ein.

Sieht man sich das Dialogfenster an, wird dessen Aufteilung in unterschiedliche Bereiche deutlich. So gibt es beispielsweise Abmessungen, Position, Hintergrund usw. Das sind – wer sich mit CSS auskennt, ahnt es bereits – typische CSS-Bereiche. So verbergen sich hinter der Gruppe Position beispielsweise all solche Angaben, welche die Positionierung von Elementen mittels position ermöglichen.

Im aktuellen Fall sollen allerdings die Schriftarten definiert werden. Aktiviert dazu das Kontrollkästchen Schrift.

Daraufhin werden zusätzliche Optionen eingeblendet. Und über diese lässt sich die Schrift des angegebenen Selektors body definieren.

Zunächst einmal wäre da das Feld Schriftarten. Tragt in dieses Feld eine durch Kommata getrennte Liste an Schriftarten bzw. –familien ein.

Verdana, Arial, Helvetica, sans-serif

Weiter geht es mit der Definition der Schriftgröße. Hier könnte man in das Feld Schriftgröße den Wert 90 eintragen. Im Feld daneben wird % eingestellt.

Über den Bereich Schriftfarbe und Deckkraft könnt ihr mittels Farbkreis die Schriftfarbe bestimmen.

Bei Schriftstil lässt sich beispielsweise festlegen, ob die Schrift fett, kursiv usw. angezeigt wird. Und auch über die anderen Bereiche könnt ihr die Schriftdefinitionen euren eigenen Bedürfnissen entsprechend anpassen. Sobald ihr mit den Einstellungen zufrieden seid, übernehmt ihr diese mit Speichern und schließen.

Das Stylesheet mit dem Seitenlayout verbinden

Wenn ihr das Frontend der Seite aufruft, wird sich Ernüchterung breit machen. Tatsächlich ist von den definierten Stylesheets nämlich noch nichts zu sehen. Damit die Veränderungen sichtbar sind, muss zuvor das Stylesheet mit dem Seitenlayout verknüpft werden. Das geschieht unter Layout>Themes. Klickt in diesem Fenster auf Die Seitenlayouts des Themes ID xx bearbeiten und anschließend auf das Stiftsymbol bei Standard-PSD-Layout.

Interessant ist in dem dann erscheinenden Dialogfenster der Bereich Stylesheets.

Aktiviert unter Stylesheets den Wert font. Nachdem die Änderungen gespeichert wurden, liefert ein Blick ins Frontend das gewünschte Ergebnis.

Nachträglich Änderungen vornehmen

Ihr könnt die CSS-Definitionen natürlich jederzeit anpassen. Das geschieht unter Layout>Themes. Klickt dort das Symbol Die Stylesheets des Themes ID xx bearbeiten an. Es öffnet sich ein Fenster, in dem auf das Stiftsymbol geklickt werden muss. Daraufhin ist die CSS-Syntax zu sehen, die von Contao auf Basis eurer zuvor gemachten Angaben generiert wurde. Um diese zu verändern, klickt ihr erneut auf das Stiftsymbol. Das öffnet das bekannte Dialogfenster, in dem sich die Stylesheets beliebig anpassen lassen.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training