Tutorial: Blogger Templates – Breite anpassen

Seit das erste Template online ist kam ab und an die Frage auf wie man denn die Breite des Inhaltes erweitern könnte. Erstmal kommt es auf das Template an. Dieses Tutorial ist für meine Templates gedacht, da ich meine Bereiche anders benannt habe als es bei standard Blogger Templates der Fall ist. Der Inhalt der meisten Templates ist durch einen sogenannten Wrapper in der Mitte zentriert. Darin befindet sich dann die Sidebar und der Content (Inhalt).

Gehe zum Verändern der Breite bei Blogger auf „Vorlage“ und unter dem Vorschaubild auf „HTML bearbeiten“. Es erscheint eine Meldung bei der du auf „Fortfahren“ klicken musst. Suche (mithilfe Strg+F) nach dem Text  #content – Die Stelle müsste ungefähr so aussehen:

/* ----------------------------------- */
/* ------------- CONTENT ------------- */
/* ----------------------------------- */

#content {
position: relative;
float:right;
overflow: hidden;
right:10px;
width:510px;
background:white;
padding:10px 15px;
text-align:justify;
}

Je nachdem was für ein Template du benutzt gibt es dort mehr oder weniger Attribute. Aber das Spielt für dich keine Rolle. Dich interessiert in dem Fall nur das width-Attribut. Width steht für die Breite die das Element hat. Dahinter wird dann die Zahl in Pixeln angegeben. Zumindest gebe ich die Breite gerne in Pixeln an.
Nun änderst du die Pixelzahl einfach nach belieben auf die Breite die du möchtest. Zum Beispiel:

width:610px;

Merke dir nun den Betrag um den du den Contentbereich verbreitert hast. In dem Beispielfall einfache 100 Pixel. Dann suchst du als nächstes nach der Stelle #wrapper – Diese Stelle müsste ungefähr so aussehen:

#wrapper {
position:relative;
margin:0 auto;
width:880px;
top:50px;
}

Falls du im ganzen Code keine Stelle mit #wrapper finden kannst hast du ein Template ohne Wrapper, da der Content dann an einer festen Stelle positioniert ist. Dann bist du mit der Verbreiterung des Inhaltes schon fertig.
Ansonsten geht es folgendermaßen weiter: Auch der Wrapper hat eine Breitenangabe. Diese musst du um den Betrag, um den du eben den Contentbereich erweitert hast, verbreitern. Im Beispiel waren das 100 Pixel, also wird der Wrapper nun auch um 100 Pixel erweitert:

width:980px;

Das ist deshalb von Nöten, weil der Wrapper immer so groß sein muss wie Sidebar und Content zusammen (sofern diese nebeneinander und nicht untereinander plaziert sind. Nicht zu Vergessen sind auch die Abstände dazwischen) damit er den Inhalt genau mittig halten kann. Bevor du das nun speicherst schaust du dir am besten die Vorschau an. Wenn es so ist wie du es möchtest kannst du das ganze speichern.

Kleiner Tipp: Da es bestimmt auch Besucher mit einer kleineren Bildschirmauflösung, wie zum Beispiel 1024 x 768, gibt ist zu empfehlen darauf zu achten, dass der Wrapper nicht über eine Breite von 1000 Pixeln hinaus geht.

22. April 2012 4 Kommentare Tutorials