Tutorial: Bloggerelemente zentrieren

Mittwoch, 28. August 2013

Um diese Codes einzufügen müsst ihr einfach auf Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen.

Code für den Header
#header-inner img {
margin: 0 auto
}

Code für das Postdatum
.main-inner h2.date-header{
text-align: center;
}

Code für die Post-Überschrift
.main-inner h3.post-title {
text-align: center;
}

Code für den Post-Text
.main-inner .post-body{
text-align: center;
}

Code für den Post-Footer
.main-inner .post-footer-line {
text-align: center;
}

Code für den Sidebar-Text
.sidebar{
text-align: center;
}

Code für den Blog-Footer
.footer-outer {
text-align:center;
}

Wenn ihr die einzelnen Elemente lieber links haben wollt oder rechts dann müsst ihr das 'center' nur durch left (für Links) oder right (für recht) ersetzen.

Noch wichtig: Wenn ihr die Codes in euer CSS einsetzt darf die Überschrift (Das Unterstrichene) nicht mitkopiert werden, sonst funktioniert er nicht!

Kommentare:

  1. Bei mir klappt das zwar aber mein Header ist immer noch nicht in der mitte

    AntwortenLöschen
    Antworten
    1. Das liegt wahrscheinlich daran das du keien richtigen Header besitzt, nur die Schrift vom Vorlagendesigner. Als Header meine ich hier direkt Header ald Bilddatein wie der, von diesem Blog hier :)

      Löschen
  2. Und wie macht man dass dann wieder rückgängig, wenn man das nicht mehr haben will?

    AntwortenLöschen
    Antworten
    1. Wenn du die wieder statt zentriert links haben willst, dann kopier den Code oben einfach wie dort steht wieder in das CSS hinzufügen-Feld und statt "right" muss dort "left" stehen :)

      Löschen
  3. Hallo Ines!
    Könntest du mir vielleicht helfen? Bei mir klappt es einfach nicht :(...
    Ich bin am verzweifeln... Ich habe den code genau so (ohne unterstrichene überschrift) eingefügt, aber mein header ist immer noch nicht mittig :( Ich bekomme es auch einfach nicht hin, dass mein favicon im tab angezeigt wird, obwohl ich es erfolgreich hochgeladen habe...
    Es wäre wirklich superlieb von dir!!!
    Ganz liebe Grüße!

    AntwortenLöschen
    Antworten
    1. Tut mir leid das ich erst jetzt antworte. Bei mir hat dieser Code für den header immer geklappt bei jeder Vorlage, desshalb kann ich dir da leider nicht helfen. Und das Favicon dauert immer manchmal Tagelang bis es dann auch auf dem Blog geladen ist, keine Sorge, das kommt noch :)

      Löschen
  4. Immer wenn ich was bei CSS hinzufügen eingebe, passiert nichts...woran liegt das? :/
    LG, Sky

    www.meinekreativewelt13.blogspot.com

    AntwortenLöschen
    Antworten
    1. Meistens ist es so das man etwas einfügen muss und dann nochmal Enter drücken muss bevor die Vorschau sich aktualisiert :)

      Löschen
  5. Hallihallo :)

    Echt cool, einen blog nur für Tutorials zu eröffnen :)
    Endlich habe ich es geschafft, Überschriften zu zentrieren und bin gerade mega happy.
    DANKE!

    The Call of Freedom and Love folge ich schon voll lange, aber bin erst jetzt über den hier gestolpert. xD

    LG
    Anni-chan

    AntwortenLöschen
  6. Toll erklärter Post! Weißt du vielleicht wie man die 'Kommentare' zentrieren kann?

    Danke schon mal im voraus! :-)

    AntwortenLöschen
    Antworten
    1. Versuche es mal mit:
      .comments {
      text-align: center;
      }

      Löschen