Post-Divider

Hallo Leute.

Vor Allem die Vielblogger unter euch kennen das Problem: bei mehreren Posts pro Tag kann es vorkommen, dass die einzelnen Posts, die ihr am selben Tag gepostet habt, nicht voneinander unterscheidbar sind. 

Die Lösung lautet hier: Post-Divider.

Und so gehts:

Zu allererst erstellt ihr euch eine Grafik, die ihr als Divider verwenden wollt. Ich nehme diese hier *klick*

Anmerkung: passt sie von der Breite her eurem Postbereich an.

Sucht dann in eurem HTML-Editor mit Strg + F nach

.post {

Fügt dann diesen Code ein (mit eurem Eigenen Bild)

background: url(URL VON EUREM POST DIVIDER);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

border-bottom:0px dotted;

padding-bottom:5.5em;

Jetzt sollte es funktionieren.

Schatten um Bilder entfernen

Hallo Leute.

Dieses Tutorial ist eines der wichtigsten für mich, denn hier geht es darum, wie man diese, meist optisch ziemlich hässlichen Schatten rund um die in Posts eigebetteten Bilder entfernen kann.

Sucht in eurem HTML-Editor mit Strg + F nach

background:  $ (image.background.color);

Um den Schatten zu entfernen, löscht ihr das von mir blau eingerahmte.
Um zusätzlich auch noch den Rahmen zu entfernen, ändert ihr das gelb markierte 1px; in 0px;

Sidebar-Titel gestalten

Hallo Leute.

In diesem Tutorial zeige ich euch, wie ihr ganz einfach mit dem HTML-Editor eure Sidebar-Titel gestalten könnt.

Öffnet zuerst euren HTML-Editor und sucht mit Strg + F nach

/* Headings

Zwischen den beiden Klammern, die ich euch hier gelb markiert habe, könnt ihr so ziemlich alles stylen. So zum Beispiel:

Unterstreichen:

border-bottom: 0.5px solid #00000;

bottom: wo ist die Linie. Hier könntet ihr auch top nehmen

1 px: wie dick ist die Linie. Hier gilt, je höher die Zahl, desto dicker

solid: wie soll unterstrichen werden. Hier könntet ihr auch dotted nehmen

#000000: in welcher Farbe soll unterstrichen werden. Hier könnt ihr jeden beliebigen Farbcode einsetzen.

Textausrichtung

text-align:center; 

 einfügen. Center könnt ihr auch mit left oder right ersetzen

Abstand zum Inhalt ändern

margin-bottom:2px;  

einfügen. Auch hier gilt, je höher die Zahl, desto größer der Abstand. Außerdem könnt ihr, wenn ihr bottom durch top, right oder left ersetzt, auch den Abstand nach oben, rechts oder links verändern

So siehts letztendlich bei mir aus

Header zentrieren

Hallo Leute.

In diesem Tutorial zeige ich euch, wie man ganz einfach den Header mit Hilfe des Vorlagendesigners zentrieren kann.

Ihr öffnet euren Vorlagendesigner [Vorlage --> Anpassen] und scrollt bei "Erweitert" ganz nach unten zu "CSS einfügen"

Dort fügt ihr folgendes ein:

#Header1_headerimg {
  margin: auto;
}

Und schon sollte euer Header zentriert sein.