Alles neu macht der Mai, oder eben der Juni. Wie auch immer, dieser Blog erstrahlt nun im neuen Glanz mit einem neuen Theme. Ich habe mich für Meeta von wpzoom entschieden, ein Responsive Theme, welches auf verschiedenen Geräten, wie PCs, Tablets oder Smartphones eine gute Figur macht.

Dennoch gab es noch einige Änderungen durchzuführen, bis das Ergebnis der Website meinen Vorstellungen entsprach. Man sollte sich den Rat von wpzoom zu Herzen nehmen und alle CSS Änderungen in der Datei custom.css vornehmen und nicht in der style.css. Es besteht sonst die Gefahr, dass bei einem Theme Update alle Änderungen überschrieben werden.

Das Logo wurde nicht korrekt angezeigt und ich musste folgenden Eintrag noch hinzufügen um Seitenabstände los zu werden. Der IE brauchte hier wieder eine Sonderbehandlung, indem max-width: 100%; explizit erwähnt werden musste:

/* header image */
#header img { 
	max-width: 100%;
	height: auto;
}

/* expand logo */
#logo {
	margin: 0px;
	float: none;
} 

Zudem habe ich den ganzen Content Bereich vergrössert und die Sidebar auf 250 Pixel verkleinert:

/* main content */
#main {
	background: #fff;
	border-right: 1px solid #ebebeb;
	float: left;
	width: 809px;
	padding-top: 30px;
}


/* Sidebar */
#sidebar {
	float: right;
	width: 250px;
 	overflow: hidden;
	padding-top: 30px;
	border-left: 1px solid #ebebeb;
	margin-left: -1px;
}

Das Meeta Theme hat eine Eigenart, welche dass ganze Layout der Webseite bei einer Seitenbreite von 786 Pixel und darunter, in Kombination mit einer Sidebar auf der rechten Seite, umbricht und somit die Sidebar am Ende der Webseite darstellt. Dieses Verhalten mag möglicherweise dem Responsive-Webdesign geschuldet sein, dennoch finde ich es extrem unpraktisch, wegen 250 Pixel eine Scroll-Orgie über dutzende von Einträgen lostreten zu müssen, nur um wieder an die Sidebar heran zu kommen.

Dieses Problem lässt sich rasch lösen, indem folgender Code eingefügt wird:

/* Tabled Portrait */
@media screen and (max-width: 768px) {

    #main { width: 67%; }

    #sidebar { 
	width: 32%; 
	margin: 0px; 
	border: none; 
    }

}

Obwohl 67% und 33% eigentlich 100% ergeben, muss in diesem Fall der summierte Wert der beiden width’s bei 99% (oder darunter) liegen. Dieses Problem scheint einen Zusammenhang mit den gesetzten Werten margin und border zu haben, die beim Ändern der Fenstergrösse nicht sauber reinitialisiert werden.

Die Archive-Auflistung wurde wieder Einzeilig gesetzt und das Suchfeld verkleinert, damit das Suchfeld mit dem Search-Button auf einer Zeile Platz hat:

/* remove double list */
.widget_archive li { 
	width: 100%; 
}

/* search textfield & button */
#s {
	width: 100px;
}

Standardmässig ist die Navigation auf der rechten Seite. Mir gefällt sie besser auf der linken Seite:

/* navigation: starts on left side */
#navbar {
	float: left;
}

Anbei die Screenshots der Webseite auf einem Samsung Galaxy S3: