5202

ein Blog über technische Fragen zu Blogger

Wie zentriere ich Header, Sidebar und andere Blog-Elemente?

von
Ich versuche hier die CSS Regeln zum zentrieren für alle Blog Elemente zusammenzufassen. Diese Regeln funktionieren _nur_ für die neuen Blogger-Layouts - nicht für die alten Vorlagen von 2006, klassische Vorlagen oder Layouts von Drittanbieter.

Angewendet wird jede CSS immer gleich - ihr kopiert im Vorlagen Designer die CSS in die Box 'CSS hinzufügen' und drückt hinter der letzten geschweiften Klammer } des letzten Ausdrucks die Taste 'Eingabe' [Enter]. Dann sollte im unteren Drittel des Bildschirms in der 'Vorschau' das gewünschte Gadget zentriert sein. Falls das nicht der Fall ist, habt ihr entweder etwas vergessen zu kopieren oder eure Vorlage ist zu alt oder sie ist nicht von Blogger.

Header

A) Einstellung 'Hinter Titel und Beschreibung"

Wenn ihr beim Hochladen eures Header-Bilds die Einstellung auf 'Hinter Titel und Beschreibung" stellt, wird das Bild zum Hintergrund. Als Hintergrund zentrier ihr euer Bild so:
#header-inner {
  background-position: center !important; 
  width: 100% !important;
}
B) Einstellung "Anstelle von Titel und Beschreibung"

Wenn bei eurem Header-Bild die Einstellung "Anstelle von Titel und Beschreibung"  wählt, wird das Bild zum HTML-Element innerhalb eines <div> Containers. Das zentriert ihr so:
#header-inner img {
  margin-right: auto !important;
  margin-left: auto !important;
}
C) Einstellung "Beschreibung nach dem Bild platzieren"

Wenn ihr die Einstellung "Beschreibung nach dem Bild platzieren" wählt, habt ihr zwei HTML-Elemente in eurem Header, einen <img> Tag und ein <span> Tag. Das wird so zentriert:
#header-inner img {
  margin-right: auto !important;
  margin-left: auto !important;
}
.Header .description {
  text-align: center !important;
}
Navigationsleiste

Das Seiten-Gadget oder andere Listen in der Navigationsleiste zu zentrieren ist so kompliziert, das ich dafür eine eigene dreiteilige Mini-Serie geschrieben habe. Die Zusammenfassung führt alle Möglichkeiten auf.

Postbereich

A) Postfeld zentrieren

Universal-Zentrierung für das gesamte Postfeld mit allen darin liegenden Elementen.
.main-inner .column-center-inner .section {
   text-align: center;
}
B) Post-Datum zentrieren
.main-inner h2.date-header{
  text-align: center;
}
C) Post-Überschrift zentrieren
.main-inner h3.post-title {
  text-align: center;
}
D) Post-Text zentrieren
.main-inner .post-body{
  text-align: center;
}
E) Bild im Post pixelgenau zentrieren

Um im Blogger-Layout ein rahmenloses Bild pixelgenau auszurichten, müsst ihr auf der linken Seite einen inneren Rand [Padding] von 7px entfernen:
.main-inner .post-body img {
  padding: 0 !important;
}
F) Post-Footer zentrieren

Zentriert alle Elemente unterhalb des Posts.
.main-inner .post-footer-line {
  text-align: center;
}
Sidebar

A) Sidebar zentrieren

Universal-Zentrierung für alle Elemente in der Sidebar.
.sidebar{
  text-align: center;
}
B) Sidebar-Titel zentrieren
.sidebar h2{
  text-align: center;
}
Footer

A) Footer zentrieren

Universal-Zentrierung für alle Elemente im Footer.
.footer-outer {
  text-align:center;
}
B) Footer-Titel zentrieren
.footer-outer h2{
  text-align: center;
}
Wir bei Bedarf fortgesetzt, bitte melden, wenn was fehlt.