Das YAML-Template stylen

Gut gibt es CSS

Von: Santscho

Um was gehts? — YAML-Template stylen | W3C-Prüfung | Browser Kompatibilitäts-Prüfung

Die CSS modifizieren

Für das Stylen des Templates sei ein guter WYSIWYG CSS-Editor empfohlen. Für Mac OSX ist "cssedit" sehr geeignet. Man kann natürlich für die Vorschau und Analyse der DIV-Container Firefox mit installierten Web Developer tools benutzen.

Dann beginnt man mit dem Stylen des Templates. Am Anfang geht es um das eigentliche Gerüst (Page, Header, Teaser, Spalten).

  1. Die Spalten in my_layout.html füllt man mit bisschen Text, damit man sich auch besser eine Internet-Seite vorstellen kann.
  2. Veränderungen werden nur in der basemod.css gemacht. Diese Datei ist die Schaltzentrale für das Layout.

Der Inhalt (Text/Bilder/Links) wird besser erst später gestaltet, wenn das Template in phpwcms integriert ist und ein paar Dummy-Artikel erstellt wurden. Aber man darf natürlich auch schon vorher am Inhalt basteln.

  1. Inhalt-Formatierungen werden gemacht in der content.css

Bilder (Hintergrundgrafiken, Bullets, ....) die für die beiden CSS-Dateien (basemod.css und content) verwendet werden, legt man am Besten im schon vorhandenen Ordner images ab.

Ist man mit dem Design zufrieden, lädt man den ganzen root testweise auf einen Webserver und unterzieht die my_layout.html einer W3C-Prüfung und lässt sie durch den Netrenderer auf Darstellungsfehler in verschiedenen Browsern prüfen.

Eine Diese Prüfung wird besser frühzeitig gemacht als später, wenn das Template schon in phpwcms integriert ist. So lassen sich Fehler im Code frühzeitig korrigieren.

Empfohlener CSS-Editor für Mac

W3C-Prüfung

Darstellung im IE prüfen