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!