Sidebar gestalten mit Minima: Teil 1 - Sidebartitel ♥♥♥♥


Heute fange ich eine kleine Serie an, indem ich erkläre, wie man die Sidebar gestaltet. Im ersten Teil geht es darum, wie man die Titel ändert. Dieses Tutorial ist nach der Minima Vorlage ausgerichtet. Bevor ihr euch die Minima Vorlage hochlädt, speichert euren jetzigen Design sicherheitshalber ab!


0. Bevor ihr den Code öffnet und ändert, schaut im Vorlagendesigner nach, was ihr auch ohne Coden ändern könnt.

1. Öffnet euren Bloggerdashboard, geht auf Vorlage und öffnet den HTML-Editor.

2. Sucht nach dem Sidebartitel-Bereich im CSS. Dafür drückt ihr Strg+F und sucht nach H2.


Der obere Teil bestimmt das Aussehen des Sidebartitels und des Datums. Das untere bestimmt nur das Datum. Wollt ihr, dass das Datum nicht aussieht wie euer Sidebartitel, dann übernehmt den CSS-Teil des oberen H2's wie folgt:


2. Nun befassen wir uns mit dem Coden. Dafür könnt ihr im oberen Teil so ziemlich alles machen. Beliebte Sachen sind:

Unterstreichen:
border-bottom: 1px solid #000;

Dabei könnt ihr jeden Wert ändern. Ändert die dicke der Linie, bestimmt die Art des Striches (solid = Strich, dashed = gestrichelt, dotted = gepunktet), bestimmt die Farbe der Linie (zB mit diesem Tool). Übrigens könnt ihr das bottom auch mit top ersetzen, dann ist der Strich oben. Oder ihr lasst es ganz weg, dann ist es komplett eingerahmt.

Schriftart ändern:

Dazu könnt ihr euch auch in den Vorlagendesigner begeben. Wenn ihr aber eine andere Schrift einbinden wollt, dann könnt ihr auch eine Schrift einbinden. Hier wird das erklärt. Bei Schritt 4 fügt ihr den Code einfach unter diesem Teil ein. Löscht dann am besten den Teil font:$headerfont;

Mit farbigen Balken hinterlegen:

Dazu übernehmt ihr den Code von diesem Tutorial. Kopiert den Code ebenfalls statt unter H3 unter unserem Teil hier. Oder noch einfacher: hier.

Schrift nicht in Großbuchstaben:

Dazu gibt es ebenfalls einen Tutorial. Oder einfach den Teil text-transform:uppercase; auf text-transform:none; umändern. Ihr könnt auch Kleinbuchstaben erzwingen, einfach statt uppercase -> lowercase eingeben.

Buchstabenabstand ändern:

Geht zum Teil letter-spacing:.2em; und ändert den Wert ab. Statt em könnt ihr auch px nutzen. Vergesst nicht, den Punkt vor der zwei mit abzuändern. Wollt ihr gar keinen Abstand, dann löscht die Zeile.

Abstand zum Inhalt ändern:

Dafür fügt ihr folgendes ein: margin-bottom:2px; Je größer die Zahl, desto größer der Abstand. Bei margin könnt ihr auch negative Werte eingeben. Den Abstand nach oben, links und rechts könnt ihr auch ändern, dafür den fügt ihr eine neue Zeile ein mit jeweils margin-top, margin-left und margin-right und natürlich den Wunschwert ein. Auch hier könnt ihr statt px -> em benutzen.

Textausrichtung ändern:

text-align:center;  - Center lässt sich sowohl mit left als auch right ersetzen.

Icons vor dem Titel:

Dazu macht ihr dieses Tutorial. Fügt den Code unter den Teil von unserem Tutorial ein und ändert alle h3 mit h2 ab, sonst habt ihr euren Icon vor dem Posttitel statt vor dem Sidebartitel.

Um noch mehr in den Sidebartitel zu ändern...

... könnt ihr im CSS-Katalog nachschauen.


Und so kann es dann aussehen:

Bei meinem Beispiel habe ich das Datum mit dem dem Sidebartitel geändert. Übrigens: Wenn euch noch einfällt, was man mit dem Sidebartitel anstellen könnte, dürft ihr es mir gern erzählen - dann ergänze ich das Tutorial!

Im zweiten Teil zeige ich euch, wie man die komplette Sidebar ändert!

19 Kommentare

  1. Sehr gutes Tutorial.

    Hast du vlt. Lust bei meiner Bloggeradventkalenderaktion mitzumachen?
    http://funnywayofsneakingup.blogspot.co.at/2012/10/bloggeradventkalender.html
    würde mich freuen! :3

    AntwortenLöschen
  2. sehr tolles tutorial! hat mir super geholfen!

    http://paperwings-blabla.blogspot.de/

    Grüßchen

    AntwortenLöschen
  3. Hab ich schonmal gemacht,aber der Tipp mit sidebartitel und datum auseinabdermachen ist mir neu und da ist bestimmt sehr nützlich. Danke :)

    AntwortenLöschen
  4. Funktioniert das nur in der Minima Vorlage?
    Liebe Grüsse

    AntwortenLöschen
  5. Hi :)
    Ich lese euren Blog schon lange und ihr habt immer so gute Tipps:)!
    Ich habe auch einen Blog und ein rieeeeesen Problem und zwar als ich mit dem Design rumgespielt habe und zu meinem alten zurück gekehrt mit ist da son Fehler, bei mir wiederholen sich immer die Posts :( Hier ein Bild: http://sunbeauty-allaboutbeauty.blogspot.de/2012/10/hiiiiiiiilfe-ihr-blogger-freunde.html
    Ich krieg das nicht weg :( Vielleicht habt ihr ja einen Rat wie ich das wieder in den Griff bekomme :)
    Über ne Antwort würde ich mich rieeeeeeesig freuen=)
    LG

    AntwortenLöschen
  6. Heey (:
    Ich bin gerade dabei auf einem Testblog (http://testbysarosh.blogspot.de/) ein neues Design für mich zu erstellen allerdings habe ich ein kleines Problem & zwar ist der Postitel mit dem Link zu den Kommentare hinterlegt & ich weiß nicht wie ich es weg bekomme.. ich möchte das neben dem Datum "Kommentar hinterlassen" oder sowas steht & nicht wenn man auf den Posttitel klickt da erst hinkommt.. könntet ihr mir da helfen ? (:

    AntwortenLöschen
  7. Schade, bei mir steht da soviel gar nicht unter h2. 2 Zeilen und dann kommen schon die widgets... Hilfe!

    AntwortenLöschen
  8. & wie ändere ich Schriftfarbe & Schriftgröße im Sidebartitel? :)

    AntwortenLöschen
  9. Hallo,

    ich habe gerade versucht wie in der Anleitung Icons vor den Titel zu setzen indem ich h3 in h2 abgeändert habe. Aber egal an welcher stelle im HTML ich den ganzen Text reinkopiere... Es klappt einfach nicht.
    Vielleicht kannst du mir mit genauerer anweisung helfen? Das wäre superlieb von dir.

    AntwortenLöschen
  10. Hey ich habe mal ne frage wie kann man neben dem Titel in der Sidebar ein kleines Bild ein fügen??
    Ich habe es in html versucht es geht i.wie nicht && dahher wollte ich fragen ob ihr mir das mal erklären könntet?

    AntwortenLöschen
  11. halli hallo:)
    Ich hätte da eine Frage, nunja ziemlich schnell eigentlich:o
    Ich würde meine sidebar gerne einrahmen, genauso wie den post footer bzw. bereich:o
    ich finde es nämlich so schön, wen sidebar und postbereich auf einer ebene sind bzw. das es so aussieht.Das geht bis jetzt leider nur wen man das schlichte desing der minima vorlage macht, welches ich auch hab.Ich würde nur gerne statt grauer sidebar, einen grauen Ramen um diese haben:)
    Kann mir wer helfen?
    http://immaculatee.blogspot.com

    AntwortenLöschen
  12. Danke!
    Das hat mir wirklich geholfen! :)

    AntwortenLöschen
  13. Bei mir klappt das einfach nicht mit der schriftart ändern.. wo muss ich genau den Link einsetzen?

    danke schonmal:)

    AntwortenLöschen
  14. hey, wie kann man denn eine Trennlinie zwischen sidebar und blogposts machen? Ein tutorial hierzu wär cool=)
    Liebe Grüße Nadja

    AntwortenLöschen
  15. Hey :) Super tutorial :)
    Ich hab aber leider Schwierigkeiten die Höhe meines Datums zu ändern :( Außerdem möchte ich das Datum zusammen mit den Kommentaren unter dem Posttitel setzten. Hab das Tutorial dazu auch schon ausprobiert aber leider klappt das nicht :(
    Kann mir jemand helfen :( ?

    AntwortenLöschen
  16. Hey :-) das Tutorial hat mir sehr geholfen :-)
    Ich habe eine Frage: Wie zentriert man den Sidebartext? :-)

    Liebe Grüße :-)

    AntwortenLöschen
  17. Hallo ihr Lieben,
    ich würde mich sehr freuen, wenn ihr mal auf meine Page schaut, wie ich den Sidebar-Text wieder in serifenlose Schrift bekomme. Die Gadgets sind in Verdana, aber der Text darunter in normaler Times-Schrift (sieht blöd aus!). Das war eigentlich immer in Arial geschrieben, aber scheinbar habe ich da irgendwas im HTML zerschossen? Wo kann ich das ändern? Im Vorlagendesigner gibt es keinen Button dafür. Vorlage: einfach

    www.stephiespost.blogspot.de

    Ganz lieben Dank! Stephie

    AntwortenLöschen
  18. ich habe den ganzen tag verzweifelt nach Templates gesucht die mir gefallen, und dann habe ich gedacht ich probiere es mal selbst. ohne eure tipps und vorlagen hätte ich es niemal geschafft :)

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!