Landhausmode.biz
Die Landhausmode liebt man, oder man mag sie gar nicht. Eine Meinung dazwischen gibt es nur selten. Für die, die Landhausmode lieben wurde unter Landhausmode (landhausmode.biz) ein übersichtliches in informatives Magazin, mit angehängtem Shop zum Thema geschaffen.
Zum Einsatz kommt beim Landhausmode Magazin landhausmode.biz das beliebte Blog Content Managment System (kurz CMS) Wordpress in der Version 2.9. Getreu dem Motto „Never touch a runing system“ wurde hier noch kein Update auf eine der aktuellen Versionen ab Wordpress 3.0 unternommen.
Sofort beim Aufrufen der Webseite fällt auf, dass hier ein minimalistisches Design eingesetzt wird. Als Vorlage diente das recht bekannte Wordpress Theme Cutline in der aktuellsten Version. Durch einfache Anpassungen im Quelltext wurde das Standard-Theme von Cutline zu einem Hingucker, ohne groß Aufsehen zu erregen.
Schauen wir uns für genauere Infos doch einmal die verschiedenen Seitenbereiche unter der Lupe an:
Wordpress typisch erfolgt der Aufruf der verschiedenen CSS-Anweisungen in einer externen Datei, welche meistens style.css heißt. In aktuelle Fall sieht das so aus:
<link rel="stylesheet" href="http://www.landhausmode.biz/wp-content/themes/cl2/style.css" type="text/css" media="screen" />
Besondere Anpassungen am Layout werden über eine zweite CSS Datei mit dem Namen custom.css eingesteuert. Dies hat den Vorteil, dass bei einem eventuellen Themeupdate die bisherigen Änderungen nicht überschrieben werden. Man könnte also von einem kleinen Child-Theme sprechen.
Das eigentliche Seitenlayout ist simpel in 4 Bereiche unterteilt: Header, Content, Sidebar und Footer. Diese werden in einem Div mit dem Namen Container zu einer maximalen Breite von 770px zusammengehalten und voll automatisch immer am Bildschirm zentriert. In der CSS erledigt dies dieser Code-Teil:
#container { width: 770px; margin: 15px auto 0 auto; }
Besonderes Augenmerk wurde auf die Gestaltung der Sidebar gelegt. Bei dieser kann man nun auf jeder Seite des Magazins ein anderes Bild anzeigen lassen. So ist es immer möglich zum beschriebenen Produkt auch ein entsprechendes grafisches Element einzubinden. Dies wird im Code über eine kleine PHP-Abfrage gelöst:
<?php if (is_page(PAGE-ID)) ?>
Die Bildgröße ist mit maximal 230px an die Breite des Seitenbereiches angepasst. Dieser wird via CSS ebenfalls auf 230px begrenzt. Der eigentliche Inhaltsbereich hat eine Breite von 500px und zwischen beiden Elementen ist ein freier Raum von 40px. Dadurch wirkt die Seite sehr aufgeräumt und es entsteht das nahezu optimale Verhältnis von 66% (Inhaltsbereich) zu 33% (Seitenleiste). In der CSS Datei wird dies so dargestellt:
#content { width: 500px; padding: 0 40px 0 0; float: left; }
#sidebar { width: 230px; float: left; }
Ebenfalls befindet sich in der Seitenleiste die strukturierte Navigation der Webseite, welche über verschiedene Listenelemente realisiert wurde. Diese Formatierung wurde ebenfalls zu 100% in die CSS-Datei ausgelagert, um so den eigentlich Quellcode so schlank wie möglich zu halten. Durch geschickte CSS Vererbungslehre wurde so eine Übersichtliche, minimalistische Listen Navigation erschaffen, welche im CSS so definiert ist:
ul.sidebar_list { list-style: none; }
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 230px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; }
li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('images/hr_dot_black.gif') 0 100% repeat-x; }
li.widget p { margin: 0 0 1.5em 0; padding: 0 10px; }
li.widget ul, li.linkcat ul { list-style: square; margin: 0 0 0.5em 20px; }
li.widget ol, li.linkcat ol { margin: 0 0 0.5em 20px; }
li.widget li, li.linkcat li { margin: 0 0 0.7em 0; }
li.widget li a, li.widget li a:visited, li.linkcat li a, li.linkcat li a:visited { text-decoration: none; }
li.widget li a:hover, li.linkcat li a:hover { text-decoration: underline; }
li.widget li .recent_date { padding: 0 0 0 8px; font-weight: bold; color: #888; }
Zum Abschluss lässt sich als Fazit für die Seite Landhausmode landhausmode.biz sagen, dass durch den geschickten Einsatz von CSS und Grafik ein wunderbar übersichtliches Design geschaffen wurde, welches dabei auch noch eine sehr geringe Ladezeit – trotz Datenbank – aufweist.