Kategorien
Nerdcontent

WordPress‘ Twenty Twelves Width verkleinern

Vor kurzem wurde mit WordPress 3.5 ein neues Standardtheme vorgestellt. Nach Ten und Eleven ist nun Twenty Twelve das Aktuelle. Ich hab es gleich ausprobiert, und mittlerweile hat es das alte Theme abgelöst. Ein bisschen Geraffel war die Anpassung der Breite.

Wie man sieht, verwende ich nur eine Spalte für den Inhalt. Weder links noch rechts gibt es ein Menü. Bei einem großen Bildschirm wird die einzige Spalte auf 960 Pixel aufgeblasen. Das sieht unoptimal aus. Wie man das Ganze verschmälert, erklärt Voodoopress.com ganz hervorragend in seinem Artikel.

Wie man vorgeht, wenn man sich gar nicht mit CSS auskennt? Dafür hab ich diesen kurzen Beitrag geschrieben. Bei aktiviertem Twenty Twelve kopiert folgenden Code, klatscht in im WordPress-Adminpanel unter Design -> CSS Bearbeiten in das Formularfeld und klickt auf Stylesheet speichern.

/* Alle relevanten Codeschnippsel zu einer Verschmälerung auf 800 Pixel Breite*/

footer[role=“contentinfo“] {
max-width: 800px;
}

@media screen and (min-width: 600px) {
.site {
max-width: 800px;
max-width: 57, 14285714285714rem;
}
}

.ie .site {
max-width: 800px;
}

Für Erklärungen, wie und warum das Ganze funktioniert, empfehle ich nochmals den Artikel von Voodoopress. Wichtig: Macht vorher eine Sicherung eurer style.css. Aber das sollte selbstverständlich sein.

Ihr könnt auch relativ einfach euer Theme auf 600, 650 oder welche Breite auch immer begrenzen. Einfach die 800px oben auf die gewünschte Breite ändern. Zusätzliche noch die eine rem-Angabe. Ich halte es da wie Voodoopress und es ist mir egal, wofür genau die rem-Einheit da ist, ich will nur wissen, wie man mit ihr die Breite ändert. Das ist alles andere als ein Hexenwerk:

Taschenrechner starten, gewünschte Breite geteilt durch 14 ausrechnen, und diesen Wert unter .site bei der zweiten max-width Angabe einfügen. In meinem Fall ist das

800 / 14 = 57, 14285714285714

Ich hoffe, dieser Beitrag hilft ein paar Leuten. Ich war jedenfalls sehr froh, als ich den entsprechenden Artikel in Englisch fand. Ich hatte zwar bereits alle Pixelangaben der max-widths angepasst, aber ohne eine Erklärung der rem-Angabe hätte ich noch eine Weile länger knobeln müssen.

Eine Antwort auf „WordPress‘ Twenty Twelves Width verkleinern“

Super, genau das was ich gesucht habe. Merci! Hatte auch erst nur die Pixelwerte gemacht und mich gewundert warum nix passiert, aber mit der rem-Anpassung und Umrechnung ging es dann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.