Eigenes WordPress-Theme erstellen

In diesem Abschnitt wird die CSS-Datei erstellt und mit den notwendigen Regeln ausgestattet.

Als erstes erstellen Sie die CSS-Datei, nennen diese style.css und legen sie in dem Ordner ab, in dem sich die HTML-Datei befindet. Da die Datei etwas länger wird, werde ich sie hier zunächst in einzelne Bereiche aufteilen. Das ist auf jeden Fall übersichtlicher:

Alle Deklarationen im oberen Abschnitt richten sich an das Element body , welches mit dem sichtbaren Bereich im Browser (engl. Viewport) gleichzusetzen ist.

Als erstes habe ich dem Hintergrund eine Farbe ( #dcdecf ) und anschließend ein Hintergrundbild ( body.gif ) zugewiesen, welches sich auf horizontaler Ebene wiederholen soll – repeat-x bezieht sich auf die X-Achse. Mathe lässt grüßen :-). Die Grafik bildet einen Verlauf von einer dunkleren zur helleren Farbe ab. Der hellere Farbton ist gleichzeitig auch die Hintergrundfarbe, dadurch wird der komplette Viewport gefüllt.

In der zweiten Zeile habe ich eine Vordergrund- oder besser gesagt eine Schriftfarbe definiert. In der dritten Zeile habe ich für den body den äußeren ( margin ) und den inneren ( padding ) Abstand auf Null gesetzt.

In der vierten Zeile habe ich einige Angabe zum Schriftbild gemacht. Mit der Eigenschaft font kann man einige Schrift-Eigenschaften zur einen Deklaration zusammenfassen. Der Wert von 100% bezieht sich auf die Schriftgröße. Der Wert 1.5 bezieht sich auf die Zeilenhöhe und diese beträgt das 1,5-fache der Schriftgröße. Dahinter folgen die Angaben zu Schriftarten. Lucida Grande ist eine Schrift auf Mac-Rechnern. Ist diese auf dem System nicht vorhanden, wird Verdana eingesetzt. Bei Verdana handelt sich um eine Schrift, die auf so gut wie allen Rechnern vorhanden ist ( http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html ). Verdana ist eine Schrift, die für den Einsatz auf Bildschirmen optimiert ist und eignet sich daher hervorragend für Fließtext.

Ist auf dem Zielsystem auch kein Verdana vorhanden, soll der Browser irgendeine auf dem System vorhandene Sans-Serife Schrift einsetzen, z. B. Arial.

In der letzten Zeile habe ich alles, was sich innerhalb von body befindet, zentriert ( text-align: center; ). Diese Angabe ist für ältere Browser (z. B. Internet Explorer 5.5) notwendig, damit wir den nachfolgenden Block mittig auf der horizontalen Ebene ausrichten können.

Wo wir gerade vom nächsten Block reden, hier kommt die dazu gehörige Regel:

Bei moderneren Browsern wie z. B. bei Firefox, aber auch bei IE 6 reicht der Wert auto bei margin um den jeweiligen Block horizontal-mittig auszurichten. Der linksbündige Textsatz ( text-align: left; ) dient dazu, die Zentrierung aus body aufzuheben. Das Element ist 890 Pixel breit, hat einen inneren Abstand von einem Pixel und einen dünnen, dunkelgrauen Rahmen. Die Hintergrundfarbe von #container ist weiß und der ganze Block wird relativ positioniert. Warum?

Ein relativ positioniertes Element bezieht sich bei der Positionierung auf sich selbst. Das hört sich zwar sehr unlogisch an, lässt sich aber sehr einfach erklären. Wenn Sie ein Element relativ positionieren und anordnen, dass es sich um 200 Pixel nach links verschiebt ( left: -200px; ), wird zwar der sichtbare Block auch nach links verschoben, dort wo er mal stand, bleibt jedoch eine Art "unsichtbarer Platzhalter", der verhindert, dass sich ein anderes Element dort niederlässt.

Ich habe das Element allerdings aus einem anderen Grund relativ positioniert. Die absolut positionierten Elemente innerhalb eines relativ positionierten Elements beziehen sich bei ihrer Positionierung nicht auf den Viewport sondern auf das relativ positionierte Element. So gesehen dient uns das relativ positionierte Element als "Rahmen".

Nun geht es darum, den Kopfbereich zu stylen:

Als erstes entfernen wir von dem Kopfbereich den inneren und äußeren Abstand, weil standardmäßig die Überschrift erster Ordnung Abstände aufweist. Anschließend bekommt sie unten zusätzlich noch einen dünnen, feinen Rahmen.

Der Hintergrund des Kopfbereiches wird mit einer dunkelgrauen Farbe bzw. der sich wiederholenden Verlaufs-Grafik ausgefüllt.

Der Verweis innerhalb der Überschrift wird als ein Block-Element deklariert und bekommt eine feste Breite und Höhe. Als Hintergrund bekommt der Link die Grafik mit dem Logo und dem Schriftzug. Die Eigenschaft text-indent bewirkt eine Texteinrückung und der Wert -9999px sorgt dafür, dass die eigentliche Schrift hier in den unsichtbaren Bereich übergeht.

Schauen wir uns aber zuerst an, was die bisherigen CSS-Regeln im Browser bewirken:

Illustration 7: Das erste Zwischenergebnis

Das schaut schon ganz anderes aus als in der vorherigen Abbildung und das nur mit den Angaben in der CSS-Datei.

Nun geht es darum die horizontale Navigation zu gestalten, hier die zuständigen CSS-Regeln:

Zuerst habe ich der div -Box, die die Navigation umschließt, Schrifteigenschaften zugewiesen und dafür gesorgt, dass die Abstände zwischen den Buchstaben um zwei Pixel vergrößert werden ( letter-spacing: 2px; ).

Bei der Liste innerhalb von #hauptnavi habe ich die Abstände oben und unten entfernt und einen neuen inneren Abstand für die linke und rechte Seite bestimmt. Mit list-style: none; habe ich die typischen Listenzeichen entfernt. Der Liste habe ich auch eine explizite Höhe zugewiesen, weil die einzelnen Listenelemente ( <li> ) floaten ("Schweben") und dadurch aus dem Inhaltsfluss herausgenommen sind.

Durch den Linksfloat ( float: left; ) ordnen sich die einzelnen Listenelemente horizontal an. Der Rest dürfte selbsterklärend sein. Hier ein weiteres Zwischenergebnis im Browser:

Illustration 8: Die horizontale Navigation

Nun kommt der Bereich dran, der den Inhalt und die Seitenleiste beherbergt. Hier die zuständigen CSS-Regeln:

Wie bereits schon im vorherigen CSS-Code-Block, werde ich die bekannten Deklarationen nicht weiter erläutern, sondern mich auf die unbekannten oder auf die erklärungsbedürftigen konzentrieren. Mit clear: left; heben wir den linken float aus der Hauptnavigation wieder auf.

Überschriften zweiter Ordnung ( <h2> ) bekommen spezielle Formatierungen. Hervorzuheben wäre hier der gepunktete Rahmen auf der Unterseite.

Den gängigen Blockelementen im Inhalt – Absätze, Aufzählungsliste, nummerierte Liste, Definitionsliste, Formular – vergeben wir neue äußere Abstände für oben und unten. Anschließend ist das Aussehen der Verweise dran, hierbei wird bei den Links der standardmäßige Unterstrich entfernt und nur beim hover -Effekt (mouseover) angezeigt.

Die Klasse clearer bekommt die Deklaration clear: both; zugewiesen. Damit werden alle floats innerhalb von #mittelbereich beendet und dadurch kann sich der #mittelbereich -Block normal ausbreiten und die nachfolgenden Elemente, wie im normalen Fluss üblich, verdrängen. Diese Klasse wird allerdings erst ihre Wirkung entfalten, wenn wir im nächsten Schritt auch den Inhalts- und Sidebar-Block floaten lassen. Doch bevor wir dies machen, schauen wir uns zuerst an, was die neuen CSS-Regeln in der Browser-Ansicht bewirken:

Illustration 9: Die fertige Seite ist schon langsam aber sicher zu erkennen

Nun geht es darum den Inhalt und die Sidebar nebeneinander zu positionieren. Hier der dazugehörige CSS-Code:

Zuerst wird der Inhaltsbereich links gefloatet und er bekommt auch direkt eine feste Breite zugewiesen. Anschließend werden die Überschriften, die in diesem Bereich vorkommen, gestylt. Hervorheben möchte ich hier die negativen Werte für den unteren, äußeren Abstand. Damit wird ein schöneres Schriftbild erreicht, da die Überschriften und der dazugehörige, folgende Absatz näher zusammenrücken.

Die Seitenleiste wird rechts gefloatet und bekommt auch eine feste Breite zugewiesen. Die Aufzählungslisten innerhalb der Sidebar verlieren alle Abstände auf der linken Seite, so wie auch die typischen Listenzeichen. Dafür bekommen die einzelnen Listenelemente einen Rahmen unten und auf der linken Seite die Pfeilgrafik ( listen-icon.gif ) zugewiesen, welche nicht gekachelt wird. Die Grafik wird am linken Seitenrand und 9 Pixel weit vom oberen Rand positioniert. So schaut das dann im Browser aus:

Illustration 10: Inhalt und Sidebar nebeneinander positioniert

Der größte Teil der Deklarationen dürfte Ihnen aus den vorhergehenden Abschnitten bekannt sein. Einzige neue Eigenschaft ist text-transform . Dieser Eigenschaft stehen neben dem Wert none (keine Veränderung) drei weitere Werte zur Verfügung:

• lowercase : alle Buchstaben werden klein geschrieben.

• uppercase : alle Buchstaben werden groß geschrieben.

• capitalize : jedes Wort bekommt am Anfang einen Großbuchstaben.

Hier die Auswirkungen im Browser:

Illustration 11: Das HTML-Template steht

Das war's für den ersten Kursteil. Das Layout steht inkl. CSS-Regeln für die gängigen Elemente. Somit haben wir eine ordentliche Grundlage erstellt, mit welcher wir in der nächsten Woche weiter arbeiten können.

Wenn Sie ein schon bestehendes Layout in ein WordPress-Theme umwandeln möchten, würde ich Ihnen empfehlen, nach dem gleichen Prinzip zu verfahren und eine vereinfachte Version des bestehenden Designs als HTML-Template zu erstellen.