Breite des Blogs ändern

In der index.php ist das, was hier als meine Beiträge sichtbar ist, in einen div-Container mit der ID “post” eingebettet. Um dessen Breite zu ändern, definiere ich in der style.css “#post” mit einer Breite von 550 Pixeln. Danach stehen die Beiträge links, die Sidebar natürlich nach wie vor rechts, dazwischen ist (bei meiner Bildschirmauflösung) eine Lücke.

Um alles etwas schmaler und mittig zu gestalten, packe ich den ganzen Code innerhalb der body-Tags in einen weiteren div-Container. Der body-Tag beginnt in der header.php, dort steht nun:

Er endet in der footer.php; der Übersichtlichkeit halber habe ich dazugeschrieben, welcher div-Tag hier beendet wird:

In der style.css definiere ich dann die Breite von “#mantel” mit 750 Pixeln. Damit der Inhalt mittig ist, setze ich noch ein “margin: auto” dazu.

Das sieht schon etwas besser aus:

Anschließend gebe ich der Sidebar in der style.css noch eine Breite von 150 Pixeln.

Eigenes Design

Ich möchte für dieses Blog kein fertiges Template verwenden, sondern selbst eins basteln. Dazu fange ich mit einem “leeren” Template namens “Tabula Rasa” an, das ich hier heruntergeladen habe, entpackt und auf meinen Webspace unter wp-content/themes kopiert und anschließend im Admin-Bereich unter Themes -> Theme-Editor aktiviert habe.
Da die style.css völlig leer ist, sieht mein Blog sehr seltsam aus:

Das Menü und die einzelnen Einträge stehen untereinander.

Ich füge eine Hintergrundfarbe ein und setze die Sidebar, die eine andere Hintergrundfarbe bekommt, nach rechts. Die style.css sieht nun so aus:

body {
background: #e6e6fa;
}

#sidebar {
float: right;
border: 1px solid #cccccc;
background: #ffffff;
}

Das macht das Ganze schon ein wenig übersichtlicher:

Bilder einrahmen

Die Bilder, die ich hier einfüge, sollen einen Rahmen erhalten, damit sie sich besser vom Hintergrund abheben. Hierfür definiere ich in der style.css eine neue Klasse “.img” mit dem Inhalt border: 1px solid #000000;

In den img src-Code jedes Bildes schreibe ich nun class=”img”, damit erhält jedes Bild den schwarzen Rand. Vermutlich kann man den Image-Browser auch so ändern, dass diese “class” automatisch in den Code jedes Bildes übernommen wird, aber das werde ich später mal versuchen, herauszufinden.