Datum unter Posttitel ♥♥♥

Hallöchen!
Oft gewünscht, nun ist es hier: Ein Tutorial, wie man das Datum unter den Posttitel packt.

Schauen wir uns einfach mal den html-Code an, vorher klicken wir aber auf Widget-Vorlagen komplett anzeigen.
Öffnet nun gleichzeitig den Editor, den werden wir gleich brauchen.

Kleiner Tipp: Ich nutze sehr gerne Notepad++ für solche Sachen. Man kann mehrere Dateien gleichzeitig offen haben und mit der Auswahl der Programmiersprache markiert das Programm die Codes bunt und erkennt teilweise, was zusammengehört. Und es hat eine Suchfunktion ;)

Wichtig ist - wie immer eigentlich - dass man sehr sauber arbeitet. Jede Zeile und jedes Zeichen haben eine Bedeutung und sind wichtig, damit alles funktioniert.

Wir suchen nun im Code nach dem folgenden Absatz:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Es könnte auch so aussehen, je nach Design:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Ihr werdet noch andere, ähnliche Zeilen finden, doch nur diese hier sind die richtigen.
Kopiert nun diese Zeilen und fügt sie im Editor ein. Aus dem html-code könnt ihr sie nun löschen :)

Als nächstes suchen wir den Abschnitt, wo unser Datum hin soll.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Direkt nach diesem Abschnitt fügen wir unsere kopierten Zeilen von vorhin ein.

Das wars auch eigentlich schon :)

Passen jetzt die Abstände nicht mehr?
Zu groß? Zu klein?
Dann schaut nochmal weiter oben, bei .date-header { ... } und h3.post-title { ... }. Um hier die Abstände zu ändern, müssen margin-top vom Datum und/oder margin-bottom vom Titel geändert werden. Dafür gibt es aber (erstmal) keine Schritt-für-Schritt-Erklärung, vielleicht ein andermal :)

Grüße,
eure Jenny