Contao (Teil 12): Den Haupt- und den Fußbereich gestalten

Wie man prinzipiell mit CSS in Contao arbeitet, habt ihr gesehen. Aufbauend auf diesem Wissen kann nun mit der Gestaltung der Seite fortgefahren werden. In diesem Tutorial werden der Haupt- und der Fußbereich der Seite gestaltet. Dabei wird wieder auf die internen CSS-Möglichkeiten zurückgegriffen, die Contao bietet. Zum Abschluss seht ihr außerdem, wie sich die Google Web Fonts in Contao nutzen lassen.

Wir empfehlen:
Contao CMS-Training

Will man die Frontend-Ausgabe umgestalten, muss man sich immer auch den jeweiligen Quellcode ansehen. Denn nur, wenn man tatsächlich weiß, welche Elemente Contao verwendet, lässt sich die Ausgabe anpassen.

Entscheidend sind in diesem Zusammenhang auch die verschiedenen Inhaltselemente, auf die im nächsten Tutorial noch einmal ausführlich eingegangen wird.

Werft zunächst einen Blick auf den im Frontend generierten HTML-Code des Hauptbereichs.

<div id="container">
<div id="main">
 <div class="inside">
   <div class="mod_article block" id="startseite">
     <div class="ce_text block"> </div>
     <h1 class="ce_headline">Herzlich willkommen bei PSD-Tutorials.de</h1>
     <div class="ce_text block">
       <p>
       ...Inhalt...
       </p>
     </div>
    </div>
  </div>
</div>

Umschlossen ist dieser von einem div-Element mit der ID container. Die mittlere Spalte ist durch das div-Element main gekennzeichnet. Dieses Wissen genügt bereits, um die gewünschten Formatierungen vorzunehmen.

Dazu wird Layout>Themes>Die Stylesheets des Themes ID xx bearbeiten aufgerufen und bei font auf das Stiftsymbol geklickt. In dem sich öffnenden Dialogfenster klickt man auf Neue Formatdefinition. Wählt anschließend die Position der neuen Definition. Im aktuellen Beispiel wählt ihr dazu in der Zeile body den Abwärtspfeil.

Jetzt seid ihr wieder in der bekannten Stylesheet-Bearbeitungsansicht.

Tragt in das Selektor-Feld #main ein. Dadurch wird die Hauptspalte angesprochen. Aktiviert nun das Kontrollkästchen Schrift. Als Schriftgröße könnte man 1.1 em angeben. Die Schriftfarbe wird auf #000 gesetzt. Gebt außerdem eine Zeilenhöhe von 1.5 em an. Das ist jetzt zunächst einmal die Basisdefinition für die Schrift der Webseite. Übernehmt die Einstellungen mit Speichern und schließen.

Ein Blick in das Frontend der Seite liefert ein erstes Ergebnis.

Ihr könnt die CSS-Definitionen allerdings noch gezielter vornehmen. Ein weiteres Beispiel soll diesen Aspekt verdeutlichen. Durch die folgenden Schritte wird ganz gezielt auf die Überschrift zugegriffen, die im Startseitentext steht. Seht euch dafür die relevante Passage im Frontend-Quellcode an.

<div id="main">
<div class="inside">
<div class="mod_article block" id="startseite">
<h1 class="ce_headline">Herzlich willkommen bei PSD-Tutorials.de</h1>

Die Überschrift ist durch das Element h1 gekennzeichnet. Das umfließende Element nennt sich main. Dieses Wissen genügt bereits, um die gewünschten optischen Anpassungen vorzunehmen. (In diesem Zusammenhang spielen übrigens die Inhaltselemente eine entscheidende Rolle. So wird das Inhaltselement Überschrift automatisch mit der Klasse ce_headline ausgestattet. Ihr könnt also auch diese Klasse für die Formatierung der Überschrift verwenden).

Legt für die Gestaltung der Überschrift eine weitere Formatdefinition an. Entscheidend ist das Feld Selektor, in das #main h1 eingetragen wird.

Wie ihr die Überschrift gestaltet, bleibt letztendlich natürlich euch überlassen. Ich aktiviere das Kontrollkästchen Schrift und nehme die folgenden Einstellungen vor:

Schriftgröße = 1.6 em
Schriftstil = fett
Text-Transformation = Großbuchstaben
Buchstaben-Abstand = 0.4 em

Mit Speichern und schließen werden die Angaben übernommen. Ein Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Auf diese Weise könnt ihr also die Überschriften der Seite beliebig anpassen. Interessant ist darüber hinaus natürlich die Frage, wie man die Darstellung des Fließtextes verändern kann. Auch hier muss man sich zunächst den Frontend-Quellcode ansehen.

<div id="main">
 <div class="inside">
 <div class="mod_article block" id="startseite">
 <h1 class="ce_headline">Herzlich willkommen bei PSD-Tutorials.de</h1>
 <div class="ce_text block">
 <p><span>PSD-Tutorials.de bietet vielfältige Möglichkeiten zum fachlichen Austausch und zur Beteiligung innerhalb des Forums und des Portals. Das Moderatorenteam ist nach den inhaltlichen Themenschwerpunkten der <em><strong>Community</strong> </em>aufgestellt, sodass für jeden Bereich bei Problemen und Fragestellungen kompetente Ansprechpartner zur Verfügung stehen.</span></p>
</div>

Um den Fließtext zu formatieren, verwendet man das p-Element in Kombination mit der ID main. Legt also eine neue Formatdefinition im Backend an. Als Selektor trägt man #main p ein. Und dann könnt ihr wieder die Schrift anpassen.

Den Fußbereich anpassen

Genauso funktioniert das dann übrigens auch mit dem Fußbereich der Seite. Werft hier ebenfalls zunächst einen Blick in den im Frontend generierten Quellcode.

<footer id="footer">
 <div class="inside">
 <h3>Copyright by PSD-Tutorials.de</h3>
 </div>
</footer>

Das entscheidende Element ist footer, dem von Hause aus auch die gleichnamige ID zugewiesen wird. Auf diesem Wissen aufbauend könnt ihr jetzt also auch den Fußbereich formatieren.

Die Kategorien und die Kaskade

Wenn ihr Formatdefinitionen im Backend anlegt, wird euch das Feld Kategorie auffallen.

Das hat aus CSS-Sicht keine Bedeutung. Interessant ist es aber für die Darstellung der Definitionen im Backend. In der Stylesheet-Übersicht gibt es entsprechende Filterfelder. Und anhand derer könnt ihr die angezeigten CSS-Definitionen auf eine bestimmte Kategorie begrenzen.

Ein Hinweis noch in Sachen Kaskade. Ihr könnt innerhalb der CSS-Übersicht die CSS-Definitionen mittels Drag&Drop in ihrer Reihenfolge verändern. Auf diese Weise lässt sich dann die Gewichtung der einzelnen Definitionen gezielt anpassen.

Google Web Fonts verwenden

Eine interessante Möglichkeit für die Schriftdefinition bieten die Google Web Fonts. Diese erlauben deutlich interessantere Schriften als Verdana & Co. (Ich gehe an dieser Stelle davon aus, dass ihr wisst, was es mit den Google Web Fonts auf sich hat).

Sucht euch unter http://www.google.com/fonts/ die gewünschten Schriften aus und bindet diese in eine Kollektion ein. Mit Use bestätigt man die Angaben.

Als Ergebnis bekommt man u.a. den Bereich 3. Add this code to your website präsentiert. Darin ist das link-Element enthalten, mit dem man die Web Fonts in seine Webseite einbinden kann.

<link href='http://fonts.googleapis.com/css?family=Noto+Sans|Alef|Roboto+Slab' rel='stylesheet' type='text/css'>

Kopiert euch die Sachen, die hinter family stehen und bis zum schließenden Anführungszeichen reichen, in die Zwischenablage.

Noto+Sans|Alef|Roboto+Slab

Mehr als diese Informationen braucht es nicht, um die Google Web Fonts in Contao einzubinden. Das geschieht unter Layout>Themes>Die Seitenlayouts des Theme ID xx bearbeiten. Klickt in der Übersicht das Stiftsymbol von Standard-PSD-Layout an. Interessant ist in dem sich öffnenden Fenster der Bereich Experten-Einstellungen und hier vor allem das Feld Google-Webfonts. Genau in dieses Feld tragt ihr die von der Google-Seite kopierte Syntax (z.B. Noto+Sans|Alef|Roboto+Slab) ein. Nachdem die Änderungen übernommen wurden, liefert ein Blick in den Frontend-Quellcode der Seite das gewünschte Ergebnis.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans|Alef|Roboto+Slab">

Die Schriftarten könnt ihr jetzt also ganz normal in euren Stylesheets verwenden.

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