WP – Breite eines Themes ändern

Dieses Premium WordPress Theme “WP-Remix 3.0″ war für meine Ansprüche einfach viel zu schmal. Ich hatte unzureichend Platz um meine Beiträge und größere Bilder zu veröffentlichen.

Falls es euch auch so geht, einfach weiter lesen.

Durch einige einfache CSS Regeln wird jedes Theme im Layout definiert.
Falls ihr also etwas an eurem Layout ändern möchtet, einfach diese Regeln finden und nach Herzenslust umschreiben.

Meine Arbeit wurde vom FireFox AddOn “FireBug” SEHR erleichtert.

Ist dieses erstmal installiert, könnt ihr jeder beliebige Webseite online editieren. Die Einstellungen bleiben solange, bis ihr die Seite neuladet.
Dauerhaft kann eine Webseite natürlich nur vom Webmaster verändert werden.

Breite ändern in “style.css”

Um die Breite in WP-Remix zu verändern, muss man einige CSS Regeln editieren.
Die CSS Regeln werden dann über ihre ID im HTML aufgerufen.

1. div id=”wrapper”
2. div id=”nav”
3. div id=”footer”

Diese 3 CSS Regeln bestimmen die Breite des WP-Remix Themes.
All diese Regeln sind im style.css gespeichert.

Die style.css findet ihr im Root Ordner eures WP-Remix Themes.

Ich habe in meinem Theme jetzt eine Breite von 1000px.
Also werde ich in allen drei CSS Regeln ebenfalls diese Breite einstellen.
Bitte darauf achten, dass ihr immer die selbe Breite benutzt! Sonst verzerrt sich das ganze Theme.

Speichert eure style.css lokal auf eurem Rechner und öffnet sie mit einem geeigneten Editor.

1. div id=”wrapper”

Sucht die style.css nach diesem Eintrag ab: “#wrapper”

Der CSS Code wird an der Stelle “width: ***px” durch eure gewünschte Breite editiert.

2. div id=”nav”

Auch hier sucht ihr nach dem entsprechenden CSS Eintrag. Finden tut er sich unter “#nav”.

Hier ebenfalls die Stelle “width: ***px” mit euren Werten ersetzen.

3. div id=”footer”

Die Breite des Footers ist unter “#footer” definiert.

Hier ebenfalls die Stelle “width: ***px” mit euren Werten ersetzen.

Blog Content und Sidebar ändern in “blog.css”

Falls ihr alle Schritte bis hierhin erfolgreich absolviert und euer Theme schon neugierig aktualisiert habt, werdet ihr feststellen, dass die Anordnung der Sidebar und der Artikel gar nicht glücklich ist.

Doch das werden wir jetzt ändern.

In WP-Remix müssen wir noch die blog.css ändern.
Diese findet sich im Theme Ordner unter “css/blog.css”

Da die Blogspalte und die Sidebar getrennt und von der Gesamtbreit unabhängig definiert werden, müssen wir hier etwas nachhelfen.

Die Artikel des Blogs werden in div id=”blog_content” aufgelistet und die Sidebar in div id=”blog_sidebar”.

1. Breite der Blogspalte – #blog_content

Gleich ganz oben in der blog.css findet ihr den Eintag “#blog_content”.

Ich habe als Gesamtbreite 1000px, daher definierte ich eine Breite von 700px für die Blogspalte.
Um das selbe zu tun, verändert die Breite in “width: 700px”.

2. Breite der Sidebar – #blog_sidebar

Die Breite der Sidebar findet ihr unter “#blog_sidebar”.

Jetzt aber aufpassen, rechnet nicht:

#blog_content (700px) + #blog_sidebar (300px) = Gesamtbreite (1000px)

Sondern lieber so:

#blog_content (700px) + #blog_sidebar (280px) + Abstand (20px) = Gesamtbreite (1000px)

Denn sonst wäre zwischen der Blogspalte und der Sidebar kein Platz mehr und die Beiträge würden direkt an die Abgrenzung der Sidebar reichen.

Lasst also in eurer Rechnung einen gesunden Abstand von 20 Pixeln übrig.

Die Breite der Sidebar also auf “width: 280px” abändern.

ÜBER DEN AUTOR

Roman

Hey, willkommen auf meinem Blog! Ich bin 24 Jahre alt und studiere Fahrzeug und Flugzeugtechnik an der FH München. In meiner Freizeit betreibe ich diesen Blog und gehe gerne fotografieren. Um mehr über mich und diese Seite zu erfahren, oder Kontakt mit mir aufzunehmen, habe ich die "About-Seite" eingerichtet. Viele Grüße