dynamicinternet Wir machen Ihr Web dynamisch!

WordPress Themes Step by Step Teil 4

Folgende Teile sind erschienen:

• WordPress Themes Step by Step Teil 1
• WordPress Themes Step by Step Teil 2
• WordPress Themes Step by Step Teil 3
• WordPress Themes Step by Step Teil 4

Inhaltsverzeichnis:

• Einleitung
• Der HTML Quelltext der Sidebar
• Die functions.php
• Die sidebar.php
• WordPress Widgets
• Stylen der Widgets
• Sidebar ohne Widgets
• Mehrere Sidebars für Widgets nutzen
• Conditional Tags in der Sidebar
• Lizenz
• Download

Einleitung

In diesem Teil der Tutorialserie wenden wir uns der Entwicklung der Sidebar zu.
Die Sidebar oder Seitenleiste (wie auch immer) stellt dem Nutzer mit den Kategorien, Tags, Suche usw. Funktionen zum Auffinden von Beiträgen oder statischen Seiten zur Verfügung und ist somit die eigentliche Hauptnavigation in einem Blog. Sie kann auch statistische Elemente enthalten oder eine kurze Blogbeschreibung, je nach Geschmack des Blogbetreibers.
Die Anordnung der Sidebar im Layout sollte vor der Themeentwicklung feststehen. Auch über die Anzahl der Sidebars sollte man sich vorher Gedanken machen. Schnell wird eine Sidebar durch letzte Kommentare, Blogrolls etc. zu lang. Daher sieht man häufig Blogs, die 2 Sidebars besitzen.
Vor der Umsetzung eines WordPress Themes sollte man sich auch über die Verwendung von Widgets Gedanken machen. Entwickelt man ein Theme, welches auch anderen Nutzern zur Verfügung gestellt werden soll, kommt man um die Widgets kaum herum. Nicht jeder kann oder will im Quellcode eines Themes herumwerkeln, möchte aber sein Blog trotzdem ein bisschen individuell gestalten bzw. entscheiden, welche Elemente er in der Sidebar darstellt. Die Möglichkeiten, eine Sidebar zu entwickeln, sind also vielfältig.

Der HTML Quelltext der Sidebar

Wir öffnen die sidebar.php in dem Editor unserer Wahl und schauen den Quellcode an.

	<!-- begin: #col3 static column -->
	<div id="col3">
		<div id="col3_content" class="clearfix"> <a id="content" name="content"></a>
		<!-- skiplink anchor: Content -->
			<h2>Column  #col3</h2>
			<p> Lorem ipsum ....</p>
		</div>
		<div id="ie_clearing"> </div>
		<!-- End: IE Column Clearing -->
	</div>
	<!-- end: #col3 -->
</div>
<!-- end: #main -->

Die Überschrift und den Absatz mit dem Lorem Text löschen wir. Ich habe hier eben einen kleinen Fehler bemerkt: Der Anker #content ist hier fehl am Platz. Er gehört in die index.php direkt unter das div #col1_content.
Der Code, den wir erzeugen, wird innerhalb des Divs #col3_content plaziert. Als nächstes werden wir die Sidebar für den Einsatz von Widgets vorbereiten.

Die functions.php

Um Widgets nutzen zu können, müssen wir die Sidebar erst einmal registrieren. Dafür gibt es die Funktion register_sidebar(). Dieser Funktion wird ein Array mit den Parametern before_widget, after_widget, before_title und after_title übergeben. Das ist nichts weiter als die Information, welche HTML Tags vor und nach dem Widget bzw. der Überschrift des Widget erzeugt werden sollen.
Diese Funktion packen wir in die functions.php. Solltet ihr keine functions.php haben, legt eine neue Datei in eurem Themeordner an und speichert sie unter dem Namen functions.php. Dort kommt dann folgender Code hinein:

<?php
if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	));
?>

Ob die Überschriften der Widgets eine h2, h3 oder h4 sein sollen, darf jeder für sich selbst entscheiden. Es ist auch möglich, andere HTML Elemente zu verwenden. Wir bleiben hier aber bei der Listenvariante.

Die sidebar.php

Nach dem wir die functions.php gespeichert haben, müssen wir noch ein paar Änderungen an der sidebar.php vornehmen:

<ul class=”sidebar”>
	<?php 	/* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<li>hello</li>
	<?php endif ?>
</ul>

Wir haben eine ungeordnete Liste mit der Klasse sidebar, in der die Widgets als verschachtelte Listenelemente erscheinen werden. Ich habe für die ungeordnete Liste eine Klasse statt einer id gewählt, weil bei 2 Sidebars (wir kommen später dazu) eine zusätzliche id einen Mehraufwand an CSS-Anweisungen bedeuten würde. Eine id darf in einem HTML Dokument nur einmal vorkommen, eine Klasse mehrfach. Aber das wisst ihr ja. Möchte man mit Javascript auf die Listen zugreifen, ist eine id für jede Liste sinnvoller. Also immer vorher überlegen, was man tun möchte. Der obige Code ist schnell erklärt.
Die Abfrage nach der Existenz der Funktion ist negiert und heißt auf Deutsch soviel wie „wenn die Funktion dynamic_sidebar nicht existiert, mach folgendes…“. Das Folgende ist das Listenelement mit dem hello. Nach Beenden der Abfrage wird die ungeordnete Liste wieder geschlossen. Machen wir die Probe und rufen unseren Blog auf. Ihr solltet jetzt ein hello sehen, weil wir noch keine Widgets eingebunden haben. Gehen wir nun im Admininterface auf Themes und dort auf Widgets und wow, wir bekommen eine Sidebar angezeigt und können die Widgets hineinziehen. Ich ziehe jetzt mal stellvertretend das Archiv hinein und schalte in den Optionen den Beitragszähler an. Nun schauen wir den erzeugten Quellcode im Browser an:

<ul>
	<li id="archives" class="widget widget_archives">
		<h3>Archiv</h3>
		<ul>
			<li><a href='' title=''>September 2007</a> (4)</li>
			<li><a href='' title=''>August 2007</a> (2)</li>
		</ul>
	</li>
</ul>

Ich habe den Code etwas gekürzt und formatiert. Wir sehen das erste Listenelement, welches die id archive und 2 Klassen widget und widget_archives bekommen hat. Mit diesen Klassen und der id können wir per CSS das Aussehen unserer Sidebar beeinflussen.

WordPress Widgets

Ziehen wir einfach alle Widgets in die Sidebar und tragen auch beim Text Widget etwas ein. Sehr hilfreich ist es bei der Entwicklung, erst einmal alle Optionen zu aktivieren, um zu sehen, was da im schlimmsten Fall auf uns zukommt. Ein Blick auf den Quelltext zeigt uns die Grausamkeiten der WordPress-Entwickler. Mal haben wir ein Div, in dem Text steht, mal haben wir innerhalb des Widgets eine weitere ungeordnete Liste mit id, mal ohne id. Wir haben mit dem Kalenderwidget eine Tabelle und als Krönung an HTML Kunst das Tag Wolke Widget. Hier haben die Entwickler ganze Arbeit geleistet und einfach die Tags hintereinander geklatscht, natürlich mit den dazugehörigen Inline-Styles für die Schriftgröße. Von Semantik keine Spur. Eine ungeordnete Liste mit entsprechenden Klassen wäre hier angebracht. Aber jammern hilft nichts, wir müssen etwas daraus machen.

Stylen der Widgets

Schauen wir uns mal die Gemeinsamkeiten der Widgets an. Alle Widgets beginnen mit einem Listenelement und alle Widgets haben eine Klasse widgets. Jedes Widget hat eine eigene id. Aufpassen muss man bei dem Text Widget, dem Kategorie Widget und dem RSS Widget. Sie können mehrfach angelegt werden und erhalten bei der id hinter dem Bindestrich die fortlaufende Nummer. Das RSS Widget behandle ich hier nicht, weil es lokal nicht geht. Wir öffnen jetzt das Stylesheet css/screen/content.css, um unsere Sidebar etwas anschaulicher zu machen:

.sidebar{
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.sidebar li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

Die Listenelemente haben keinen Listenpunkt mehr und die Listenelemente, die die Widgets einfassen, sind an den linken Rand gerückt. Der rechte und linke Innenabstand der Sidebar wird nur noch durch das Padding des Containers bestimmt (steht in der basemod_2col_right_seo.css):

#col3_content { padding: 10px 20px 10px 10px; }

Jetzt wollen wir unter jedem Widget einen unteren Rahmen, um die Widgets optisch etwas zu trennen. Um alle Widgets auf einmal anzusprechen haben wir die Klasse widget.

.widget { border-bottom: 1px solid #eee; }

Die Widgets kleben zu eng aneinander,deshalb ändern wir das Margin der obersten Listenelemente:

.sidebar li {
	list-style-type: none;
	margin: 0 0 1em 0;
	padding: 0;
}

Das vererbt sich natürlich auf die untergeordneten Listenelemente, was wir natürlich nicht wollen.

.sidebar li ul li, .sidebar li ul li ul {
	padding: 0;
	margin: 0 ;
}

Möchten wir bei den Überschriften der Widgets noch ein wenig Platz nach unten, ist das kein Problem:

.sidebar h3 { margin-bottom: 0.5em; }

Jetzt sieht es etwas großzügiger aus. Ihr könnt natürlich den Überschriften andere Farben zuweisen, einen Rahmen, was immer eurem Geschmack entspricht. Wir sehen, dass bei dem Text Widget der Text nicht den gleichen linken Abstand hat wie die Listenelemente und der untere Rahmen genau unter dem Text klebt.

li.widget_text {
	padding-bottom: 1em;
}
.textwidget { padding-left: 1em; }

Damit ist das Textwidget nun auch ausgerichtet.
Das Suche-Widget hat ebenfalls unten keinen Abstand. Wir sehen außerdem ein sehr kleines Inputfeld. Einen Submitbutton bei der Suche habe ich schon lange in keinem Blog mehr gesehen. Korrigieren wir das:

li.widget_search { padding: 0 0.5em 1em 1em;}
#searchform input, #searchform br {display: none;}
#s { display: block !important; width: 100%; }

Zuerst wird alles unsichtbar gemacht. Danach wird nur das Texteingabefeld mit der id #s wieder sichtbar gemacht. input[type=submit] verstehen leider die Internetexplorer 6 und kleiner nicht, sonst könnte man sich eine Zeile sparen.
Den dunklen Rahmen vom Texteingabefeld lassen wir erstmal so, wenn ich den Teil mit der single.php und den Kommentarformular schreibe, style ich alle Inputfelder. Versuchen wir nun bei der Tag Wolke zu retten, was zu retten ist.

li.widget_tag_cloud { padding-bottom: 1em; }
li.widget_tag_cloud a {margin-left: 0.25em; line-height: 1em; }

Obwohl ja niemand mehr den Kalender benutzt, werden wir ihm trotzdem stylen, man weiß ja nie…

#calendar_wrap { margin-left: 1em; margin-bottom: 1em; }
#wp-calendar thead th, #wp-calendar tfoot tr { background: #4D87C7; color: #fff; }
#wp-calendar tbody a { background: #4D87C7; color: #fff; font-weight: bold; }
#prev a , #next a{ color:#fff; text-decoration:none;font-weight:bold; }
#prev a:active, #prev a:focus, #prev a:hover,
#next a:active, #next a:focus, #next a:hover { text-decoration:underline; }
#today { font-weight: bold; }

Nachdem das erledigt ist werfen wir einen Blick auf unser Layout. Für meinen Geschmack ist die Sidebar zu schmal. Außerdem finde ich den Abstand von der Inhaltsspalte zur Sidebar zu gering. Der Abstand von Post zu Post ist ebenfalls zu klein.

.post {
	border-bottom: 1px solid #eee;
	margin-bottom: 2.0em;
	padding-bottom: 2em;
}

Jetzt sehen die Beiträge nicht mehr so zusammengeschoben aus. Den unteren Rahmen der Post habe ich auch gleich auf 1px Stärke verringert. Öffnen wir nun die css/screen/basemod_2col_right_seo.css und ändern die Breite der Inhaltsspalte #col1 auf 66.666% (wegen Rundungsfehlern so genau), die statische Spalte #col3 bekommt einen linken margin von 66.666%.

#col1 { width: 66.666%; float:left}
#col3 { margin-left: 66.666%; margin-right: 0; }

Die Farbe des linken Rahmens von #col3 passen wir ebenfalls den anderen Rahmenfarben an.

#col3 { border-left: 1px #eee solid; }

nun noch die seitlichen Abstände der Spalten korrigieren:

#col1_content { padding: 10px 20px; }
#col3_content { padding: 10px 20px; }

So einfach ist es, ein Layout auf YAML Basis zu verändern. In unserem Beispiellayout reicht die Spalte #col3 immer bis zum Footer. Damit ist eine linke Border oder auch eine Hintergrundfarbe der Sidebar ganz ohne Grafikeinsatz möglich. Schmeißt einfach noch mal alle Widgets raus und gebt der #col3 background: #eee , die Spalte ist auch ohne Inhalt immer die Längste.

Soweit ist jetzt alles in Ordung. Bei dem Seiten-Widget und dem Kategorie-Widget ist ein Level Unterseiten- bzw. Unterkategorien berücksichtigt. Wer noch tiefer in der Struktur gehen will, muss dementsprechend nacharbeiten.
Die Tags richten sich links nicht wie die Listen aus. Würde ich das margin-left auf 1em erhöhen, wird der Anstand der Tags zueinander zu breit. Keine Idee im Moment, vielleicht hat ja ein Leser einen Einfall.

Sidebar ohne Widgets

Die Widget-variante ist fertig. Jetzt müssen wir etwas tun, falls jemand keine Widgets einsetzten möchte oder die Widget Funktion nicht vorhanden ist. Dazu könnten wir eine neue Struktur anlegen. Das würde aber bedeuten, dass wir alles, was wir an neuen Elementen, id’s und Klassen hinzufügen, komplett neu stylen müßten. Wir orientieren uns daher einfach an den Widgets. Öffnet jetzt die sidebar.php. Unter der Zeile

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :

löschen wir die „hello“-Zeile und beginnen mit dem Textfeld:

<li id="text-1" class="widget widget_text">
	<h3>Mein Blog</h3>
	<div class="textwidget">Dein Text</div>
</li>

Das ist genau der Code, den das Textwidget erzeugt. Als nächstes kommt das Suchfeld. Dazu kopieren wir aus dem default_de Theme die Datei searchform.php in unseren Themeordner. Diese Datei wird nun includiert (eingebunden).

<li id="search" class="widget widget_search">
	<?php include(TEMPLATEPATH ."/searchform.php"); ?>
</li>

TEMPLATEPATH ist eine Konstante, die uns WordPress bereitstellt. Sie beinhaltet den absoluten Pfad zu unserem Themeverzeichnis.
Da wir eine horizontale Navigation haben, brauchen wir die Seiten nicht noch mal in der Sidebar. Als nächstes binden wir die Kategorien ein:

<?php wp_list_categories('title_li=<h3>Kategorien</h3>'); ?>

Hier werden durch den Parameter title_li die Kategorien in eine Liste mit der Überschrift Kategorien geschrieben. Wenn ihr Anzahl der Einträge in einer Kategorie anzeigen möchtet benutzt ihr

<?php wp_list_categories('show_count=1&title_li=<h3>Kategorien</h3>'); ?>

Die komplette Übersicht aller möglichen Parameter für wp_list_categories.
Das Archiv wird mit dem Template Tag wp_get_archives erstellt.

<li id="archive"><h3>Archiv</h3>
	<ul>
		<?php wp_get_archives('show_post_count=1&type=monthly'); ?>
	</ul>
</li>

Hier wird mit dem Parameter show_post_count=1 die Anzahl der Beiträge aktiviert. type=monthly gibt ein monatliches Archiv aus. Möglich wären yearly, weekly, daily und postbypost. Der Parameter postbypost ist sehr interessant. Wenn man ihn benutzt und ein Limit angibt hat man die letzten x Beiträge:

<?php wp_get_archives(type=postbypost&limit=5); ?>

Bei der Tag Cloud müssen wir zuerst sicherstellen, dass WordPress 2.3 oder höher benutzt wird, da erst hier die Tags zur Verfügung stehen(wenn ihr nur für euch das Theme entwickelt und ihr benutzt WordPress 2.3 oder höher, braucht ihr das natürlich nicht).

<?php if ($wp_version >= "2.3") : ?>
<li id="tagwolke" class="widget">
	<h3>Tag Cloud</h3>
	<?php wp_tag_cloud('smallest=100&largest=250&unit=%&format=list'); ?>
</li>
<?php endif; ?>

Bei wp_tag_cloud nutzen wir die Parameter smallest und largest für die Schriftgröße, unit für die Maßeinheit der Schrift und als format wählen wir die Liste. Eine Übersicht über alle Parameter findet ihr in meinem Beitrag Tags in WordPress 2.3.

Bleiben uns noch die Blogroll und eventuell ein Link zum Anmelden bzw. zum Registrieren. Dafür stehen uns auch wieder Template Tags zur Verfügung. Bei der Blogroll benutzen wir

<?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>'); ?>

und für die Links zum Anmelden

<li id="meta"><h3>Meta</h3>
	<ul>
		<?php wp_register(); ?>
		<li><?php wp_loginout(); ?></li>
	</ul>
</li>

Jetzt müssen wir natürlich alle Widgets aus der Sidebar entfernen, um zu überprüfen, ob der Code auch funktioniert. Der Quelltext ist ebenfalls zu validieren. Hier noch einmal der komplette Code der Sidebar:

<!-- begin: #col3 static column -->
	<div id="col3">
		<div id="col3_content" class="clearfix">
			<ul class="sidebar">
			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
			if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
				<li id="text-1" class="widget widget_text">
					<h3>über dieses Blog</h3>
					<div class="textwidget">Mein Text</div>
				</li>
				<li id="search" class="widget widget_search">
					<?php include(TEMPLATEPATH ."/searchform.php"); ?>
				</li>
				<?php wp_list_categories('show_count=1&title_li=<h3>Kategorien</h3>'); ?>
				<?php if ($wp_version >= "2.3") : ?>
				<li id="tagwolke" class="widget">
					<h3>Tag Cloud</h3>
					<?php wp_tag_cloud('smallest=100&largest=250&unit=%&format=list'); ?>
				</li>
				<?php endif; ?>
				<li id="archive"><h3>Archiv</h3>
					<ul>
						<?php wp_get_archives('show_post_count=1&type=monthly'); ?>
					</ul>
				</li>
				<?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>'); ?>
				<li id="meta"><h3>Meta</h3>
					<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
					</ul>
				</li>
			<?php endif ?>
			</ul>
		</div>
		<div id="ie_clearing"> </div>
		<!-- End: IE Column Clearing -->
	</div>
	<!-- end: #col3 -->
</div>
<!-- end: #main -->

Es sollte alles in Ordnung sein. Wir müssen dem Stylesheet css/screen/content.css einige Sachen hinzufügen. Die Archiv- und Kategorieliste haben keine border-bottom, ebenfalls die Blogroll und die Metaliste. Das liegt daran, dass die Listen nicht die Klasse widget haben. Das einfachste ist, im Quelltext zu schauen, welche ID’s oder Klassen die Listen haben und die bei der Klasse widget hinzuzufügen. Also erweitern wir die vorhandene Klasse widget:

.widget, .categories, #archive, .linkcat, #meta {
	border-bottom:1px solid #eee;
}

Da wir bei der Tag Cloud als Format Liste gewählt haben, stehen die Listenelemente nun schön untereinander. Das müssen wir noch abändern:

#tagwolke {
	padding: 0!important;
	margin-bottom: 1em;
	overflow: hidden;
}
#tagwolke ul li {
	display: inline;
	margin-right: 0.15em;
	line-height: 1.8em;
}

Die Sidebar ist fertiggestellt. Das Thema Sidebar noch nicht. Ich möchte noch ein paar Tipps geben, die über die Grundlagen hinausgehen.

Mehrere Sidebars für Widgets nutzen

Zunächst müssen wir dafür das Layout etwas verändern. Dank YAML kein großes Problem. YAML stellt dafür Bausteine zur Verfügung. Wir teilen die Sidebar in 2 Bereiche mit jeweils 50% Breite:

<!-- begin: #col3 static column -->
<div id="col3">
	<div id="col3_content" class="clearfix">
		<div class="subcolumns">
			<div class="c50l">
				<div class="subcl">links
				</div>
			</div>
			<div class="c50r">
				<div class="subcr">rechts
				</div>
			</div>
		</div>

In der funktions.php muss die Funktion zur Registrierung der Sidebars geändert werden, damit beide Sidebars nun erkannt werden:

if ( function_exists('register_sidebar') )
register_sidebars(2,array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
));

Danach muss in jede Spalte der Sidebar wieder die bekannte Funktion dynamic_sidebar, diesmal aber mit Paramter

…
<div class="subcl">
<ul class=”sidebar”>
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
	<li>…</li>
	<?php endif ?>
</ul>
</div>

Dasselbe in der rechten Spalte, nur da bekommt dynamic_sidebar(2) die 2.
Mit dieser Technik können wir so viele Sidebars einrichten, wie wir wollen.

Als letzten Punkt zum Thema Sidebar in WordPress möchte ich auf die Möglichkeit einer dynamischen Sidebar eingehen.

Conditional Tags in der Sidebar

Wir haben in den vorangegangenen Teilen die Conditional Tags von WordPress kennengelernt. Diese können wir natürlich auch in der Sidebar nutzen, um bei bestimmten Ansichten eine etwas andere Sidebar darzustellen. Das funktioniert aber nicht wirklich (ist extrem aufwendig) mit der Verwendung von Widgets.
Ein Beispiel aus meinem Blog: ich habe auf der Blogstartseite die letzten Kommentare und Pingbacks in der Sidebar. In der Artikeleinzelansicht habe ich dann oben die letzten 10 Artikel gelistet. Da braucht der Leser nicht jedes Mal zurückgehen. Der Code dazu ist einfach:

<?php
if (is_single() ) :
	tue etwas
endif;
?>

So kann man je nach Bedarf Elemente der Sidebar verändern. Man muss sich natürlich darüber im Klaren sein, das bei dieser Technik die Übersichtlichkeit im Code schnell verloren geht. Auch muss bei jedem Seitenaufruf erst geprüft werden, ob die Bedingung zutrifft oder nicht. Ich habe Themes gesehen, da konnte man nur noch mit Mühe nachvollziehen, was da eigentlich passieren soll. So etwas ist schwer zu warten. Möchte man für einen Spezialfall eine doch etwas andere Sidebar haben (so wie ich bei meinen statischen Seiten wie dieser hier), ist es oft einfacher, eine extra Datei anzulegen (zB. sidebar-pages.php) und diese dann zu includieren:

<?php include(TEMPLATEPATH.'/sidebar-pages.php'); ?>

Natürlich kann man in so einem Tutorial nicht alle Anwendungsfälle beschreiben, sonst würde bestimmt ein Buch daraus . Zum Verständnis sollte es jedoch reichen.

Lizenz

YAML wurde unter der Creative Commons Attribution 2.0 Lizenz (CC-A 2.0) veröffentlicht. Aus diesem Grund stehen die Downloadpakete ebenfalls unter der CC-A 2.0. Eine kostenlose private und kommerzielle Nutzung ist gestattet.
Bedingung: Für die kostenfreie Nutzung des YAML Framework und des hier erstellten Themes ist die Namensnennung der Autoren/Rechteinhaber und die Rückverlinkung zur YAML Homepage (http://www.yaml.de) sowie zu meiner Homepage (http://dynamicinternet.eu) in der Fußzeile der Webseite oder im Impressum vorgeschrieben.

Update

Bernd hat einen Fehler gefunden. Im Safari wurden die Stylesheets komplett ignoriert. Das lag daran, das der Safari die Anweisung @charset “UTF-8″; an erster Stelle im Stylesheet erwartet. So sollte es auch normalerweise sein, die anderen Browser sind da fehlertoleranter. Sorry, mein Fehler. Ich habe alle Downloadpakete nachgearbeitet. Ihr könnt aber auch die style.css manuell ändern:
Einfach die Anweisung @charset “UTF-8″; an den Anfang des Stylesheets kopieren.

Download

Der aktuelle Stand des Themes inclusive aller in diesem Teil durchgeführten Änderungen kann als Zip-Datei heruntergeladen werden. Download

Für Fragen, Anregungen, Wünsche etc. bitte einen Kommentar hinterlassen.