medamind

Ein Contao Projekt planen und beginnen - 3

Dieser Teil der Serie ist dem großen und auch für “ehemalige” TYPOlight-Anwender noch relativ neuen Thema Themes gewidmet. Themes gibt es in TYPOlight erst, seit aus TYPOlight Contao wurde. Endlich geht es also ans Layouten, ein Prozess, der durchaus iterativ ist und sicherlich nicht von Beginn an stringent durchgezogen werden kann.  Als Vorbereitungen dafür ist es hilfreich, eine rudimentäre Seitenstruktur samt einiger Inhalte anzulegen und parallel einige Einstellungen vorzunehmen wie in Teil 2 beschrieben.

Ziel dieses Schritts ist es, die Basis für ein individuelles Layout zu schaffen - ohne Finetuning. Denn wie das aussieht, muss natürlich jeder selbst wissen. Dieser Artikel also eine Inspiration für das eigene Contao-Styling.

Theme anlegen

Das Contao Theme selbst ist schnell angelegt: Es braucht mindestens einen Namen und einen Autor und schon kann es losgehen. Auch wenn man später sein Theme nicht exportieren will, empfehle ich,  die Einstellungen zum Theme-Ordner und dem Templates-Ordner gleich vorzunehmen:

1. In /tl_files ein Unterverzeichnis /mein_theme_layout anlegen
2. in /templates ein Unterverzeichnis /mein_theme_templates anlegen
3. dem neuen Theme den Theme-Ordner und den Templates Ordner zuweisen.

Später werden dann alles Grafiken, die fürs Layout verwendet werden (Hintergründe, Icons und was sonst so nötig ist, im Theme-Verzeichnis /tl_files/mein_theme_layout abgelegt. Falls man eigene Templates braucht, legt man die analog dazu im entsprechenden Templates-Unterverzeichnis ab und muss sich ab sofort keine Gedanken mehr machen. Wie geht man das Ganze sinnvoll weiter an?

Hinweis: Die folgenden Schritte gehen davon aus, dass man die Funktionen des Contao Backends nutzt, ohne dabei  Framework und CSS Eingabemaske zu “umgehen”.

Stylesheets anlegen

Weil die Stylesheets mit dem Seitenlayout veknüpft werden, ist es sinnvoll, erst das oder die Stylesheets anzulegen (soweit möglich… das x-te für den Conditional Comment kann meines Erachtens warten, bis man sich der Herausforderung IE stellen möchte) und danach erst das Seitenlayout.

Einige Gedanken sollte man sich vorab machen, damit Ordnung reinkommt und man gut Ordnung halten kann:

• Wird es ggf. mehrere Themes geben? Wenn ja, gibt es vielleicht Styles, die wiederverwendet werden können… Da hilft das Anlegen eines Basis-Stylesheets, das ganz grundlegende Definitionen beinhaltet wie beispielsweise Resets oder allgemeine Angaben zu den wichtigen Contao Klassen.
• Können alle (anderen) Definitionen in ein Stylesheet oder möchte man beispielsweise eine separate Datei für Farben, um verschiedene Seitenlayouts anders einzufärben?
• Brauchen ganz abgesehen davon einzelne Seitenlayouts eigene Definitionen…?
• Und dann natürlich noch der liebe Internet Explorer…

Module

Auch das ist ein iterativer Prozess und natürlich davon abhängig, wie viel Inhalte bereits angelegt wurden. In jedem Fall braucht man aber Grundfunktionen - auch um die Navigation an sich testen zu können. Dazu gehören, sofern zutreffend:

• ein horizontales Menü, das in meiner Vorstellung in Teilen der ersten Ebene der Seitenstruktur entspricht als Navigationsmenü
• ein im Kontext arbeitendes weiteres Navigationsmenü, das vertikal eingesetzt wird.
• ein individuelles Navigationsmenü
• Module für Erweiterungen nach Belieben (für die ersten Schritte und etwas “Sehenswertes” allerdings nicht dringend nötig)

Seitenlayout

Ich beginne mit einem einzigen Seitenlayout und zwar nicht notwendigerweise mit dem späteren Standardseitenlayout. Ich finde es interessanter und effizienter, ein Seitenlayout zu wählen, das den für die Seite typischen Seitenaufbau hat (beispielsweise Kopfzeile, Fußzeile plus Spalte links) und viele der Features bereits mitbringt, die auch die anderen Seitenlayouts nutzen (beispielsweise eine horizontale und eine vertikale Navigation plus anderer Navigationselemente).

Meine Idee dahinter ist:

• bereits mit dem ersten Seitenlayout und dessen Styling relativ viele der Eigenschaften aller Seitenlayouts abzudecken
• weitere Seitenlayouts nicht durch Hinzufügen sondern durch Abspecken zu klonen

Im ersten Schritt muss also die Startseite noch nicht aussehen wie die spätere Startseite. Wichtig sind die Basiselemente.

Beginnen mit Stylesheets

Die wesentlichen Styles zum Seitenaufbau werden vom Contao CSS Framework mitgeliefert und so wird eine Seite ohne jegliches CSS zumindest  “geordnet”, wenn auch noch etwas karg aussehen. Man sollte sich genau das übrigens inklusive Quelltext ansehen, um zu verstehen, wie das CSS Framework arbeitet.

Reset

An Anfang kann man  über ein ein Reset-Stylesheet nachdenken. Reset Stylesheets dienen dazu, die Default-Darstellung in unterschiedlichen Browsern zu vereinheitlichen - eine allgemein gehaltene Sache also, in der es vorwiegend um Abstände, Höhen und Größen geht und in dem Farben und Schriftarten natürlich nichts verloren haben. Ein Beispiel für ein solches - um nicht zu sagen, den Klassiker, findet man beispielsweise bei Eric Meyer.

So ganz unkritisch wird das Reset Stylesheet allerdings nicht betrachtet. Eine interessante Abhandlung kann man beispielsweise bei  nachlesen.

Contao-spezifisch

Die folgenden, teils unsortierten Überlegungen sind natürlich allgemein gehalten, sollen aber ein bisschen helfen, wiederverwendbare CSS-Anweisungen zu schreiben und Prinzipien wie Vererbung zu nutzen. Es geht vor allem darum, sich schnell ein Grundgerüst zu bauen, das “nach etwas aussieht” und auch alle weiteren Inhalte wie Formulare oder Module für Erweiterungen gut aussehen lässt:

• Styling für die Menüs, insbesondere die, die horizontal laufen werden
• Innenabstände für die einzelnen Layoutbereiche
• Text, Überschriften, Links
• Formular Elemente
• Contao-spezifische Klassen

Menüs
Um Menüs grundsätzlich zu positionieren, reichen abseits von Hintergrundgrafiken und “fancy” Mouse-Over Effekten einige wenige CSS-Angaben zu Elementen wie ul und li. Menüs haben in horizontaler Form meist eine Anweisung wie list-style-type:none oder nutzen eigene Bullets.Wer übrigens Meyers Reset nutzt, ist an dieser Stelle bereits einen Schritt weiter ;-)
Sehr speziell hingegen sind die Angaben zu den Links, denn sie sie sind abhängig von Hover und anderen Effekten und haben recht viel mit Feinarbeit zu tun. Um es nicht zu vergessen, rate ich, sich gleich sämtlicher Contao-Klassen anzunehmen:

• span.active entspricht dem aktuell aktiven Menüpunkt
• a.trail entspricht dem Eltern-Element eines aktiven Menüpunkts (nur beim Modul-Typ Navigationsmenü)

Ziel des Menü Stylings ist eine korrekte Positionierung von Menü Items sowohl für horizontale als auch vertikale Menüs.

Innenabstände: stressfrei
Jeder Layoutbereich hat nicht nur seine eigene CSS-ID, sondern auch ein “Innenelement” mit der Klasse inside. Weil sich das Innenelement im Allgemeinen sorglos seinem Layoutbereich anpasst, kann man Innenabstände eines Layoutbereichs gelungen über den Außenabstand dieses div.inside Element definieren und läuft kaum Gefahr, dabei etwas falsch zu machen, etwa in der Form #main .inside{margin-left: 12px; margin-right: 12px}.

Ziel ist es, die Layoutbereiche klar voneinander abzugrenzen und eine übersichtliche Arbeitsumgebung zu schaffen.

Text, Überschriften und Links
Wenn die Menüs erstmal sitzen wie gewünscht, die Seitenelemente nicht mehr gequetscht aussehen und der Text sich irgendwie in Form gebracht anfühlt, ist man einen großen Schritt weiter finde ich, es vermittelt den Eindruck, schon einen wesentlichen Teil geschafft zu haben. Im Wesentlichen erstmal:

• allgemeine Schriftangaben im body Element
• Überschriften mindestens h1…h3
• Textelemente
• Links

Wichtig übrigens sind auch immer die Tabellen…

Formular-Elemente
Selbst wenn man keine eigenen Formulare einsetzt, gibt es sie trotzdem: Das Login beispielsweise, die Suche oder etwas komplexer das Formular zur Eingabe persönlicher Daten (Mitglieder). Ohne sich sofort an ein tabellenfreies Formular zu wagen, kann man also getrost (Abstands, und Breiten-)Angaben für folgende Elemente machen

• Labels
• input.text, dem ganz normalen Text-Eingabefeld und input.captcha, dem Eingabefeld für die Sicherheitsfrage
• textarea, einem Eingabebereich

Contao Klassen
Es gibt eine Menge Contao Klassen, darunter aber auch viele, die einem immer wieder begegnen: .block beispielsweise, .more, .back, .info oder .odd und .even.
Die müssen natürlich nicht an jeder Stelle identisch aussehen, aber ist es sinnvoll, erst einmal eine allgemeingültige Variante zu definieren, die man im Finetuning überschreiben kann.

Ziel ist es, dass Texte und auch Textblöcke wie Teaser einheitlich dargestellt werden und besondere Merkmale wie Textbündigkeit und Abstände bereits erkennbar sind.

Wiederverwendbarkeit und Next Steps

In der Praxis vermischen die Basis-CSS Konfiguration und das Finetuning natürlich. Wer aber an dieser Stelle einen Cut macht, hat eine solide Basis für weitere Contao Websites geschaffen. Das geht ganz einfach:

Mit Hilfe der Erweiterung lassen sich nämlich neben einfachen Datenbank Backups auch Template-Exporte erstellen. Da mit dem Template auch Themes, Stylesheets und Seitenlayouts exportiert werden, hat man mit einer gelungenen Seitenstruktur, einigen zusätzlichen Angaben sowie einem rudimentären Grundgerüst schnell mal einen wiederverwendbaren Grundaufbau geschaffen und spart sich so einzelne Schritte, die ich in diesem als auch dem vorhergenden Artikel beschrieben habe.

Direkter Link zu den vorhergehenden Kapiteln:

Teil 1: die Vorbereitungen und die Konzeption

Teil 2: nach der Installation