Tipps & Tutorials, tutorial

Posttitel individuell gestalten

Erst einmal möchte ich mich kurz vorstellen – ich bin nämlich neu hier 🙂 Mein Name ist Neele und vielleicht kennen einige wenige von euch mich schon durch meinen Blog www.vanillebrause.com

Ich beschäftige mich sehr gerne mit HTML, CSS etc. und dies ist auch der Grund, weshalb ich von nun an regelmäßig HTML-Tutorials auf CPL beisteuern werde!
Ich hoffe euch wird mein Tutorial gefallen, hinterlasst mir doch mal eure Meinung dazu, was ich besser machen könnte oder was gut gelungen ist. Nun aber zum eigentlichen Thema dieses Posts….
Vorweg ist zu sagen, dass dieses Tutorial grundsätzlich für alle funktioniert, die das MINIMA TEMPLATE verwenden (hier könnt ihr es herunterladen). Bei anderen Templates könnten Abweichungen bei den CSS-Bezeichnungen auftreten. Falls ihr also etwas ausprobiert – denkt daran, vorher ein Backup abzuspeichern!
TEXTFORMATIERUNG

Um den kompletten Titel eures Posts automatisch in Großbuchstaben zu formatieren, müsst ihr in eurem Layout-Code folgende Zeile suchen:
.post h3 {
Darunter fügt ihr nun einfach folgendes ein:
text-transform: uppercase;

Falls ihr lieber komplett Kleinbuchstaben möchtet, folgendes:

text-transform: lowercase;

Damit euer Posttitel mittig erscheint, fügt ihr folgende Zeile zusätzlich ein:

text-align: center;
Bei dem oberen Beispiel ist der Posttitel zusätzlich unterstrichen. Diesen Effekt erreicht ihr durch das Hinzufügen folgender Zeile:
border-bottom: 1px dashed #000000;

Das dashed gibt an, WIE der Titel unterstrichen ist. Für eine durchgezogene Linie muss dort solid stehen, für eine gepunktete dotted. #000000 ist die Farbe der Linie als Hexacode. 1px bestimmt die Dicke der Linie.

Um eine zusätzliche Linie überhalb des Titels zu bekommen, fügt folgende Zeile hinzu:

border-top: 1px dotted #000000;

Die Anpassungen in Sachen Farbe und Linienart erfolgen analog zur unteren Linie.

Außerdem könnt ihr nun noch die Hintergrundfarbe eures Titels verändern. Dazu fügt ihr folgende Zeile hinzu:
background-color: #d7e3e2;

#d7e3e2 beschreibt wieder die Farbe als Hexacode.

Ich hoffe, dass mir das Tutorial gelungen ist, sodass ihr alles verstanden habt und auch HTML-Einsteigern eine kleine eigene Veränderung an ihrem Blog gelingt 🙂

20 Comments

  1. Sarah

    4. March 2013 at 12:19

    Gute Erklärung, dankeschön.

    LG

  2. Christine

    4. March 2013 at 12:54

    Danke für die Anleitung, werde ich heute abend gleich mal versuchen 🙂 LG Christine

  3. Lea.

    4. March 2013 at 13:27

    Schönes Tutorial 🙂
    Ich würde mich freuen, wenn du mal erklären könntest, wie man (wie in deinem alten Design) anstatt eines Headers solche Thumbnails zu den letzten Posts des Blogs einbauen kann 🙂

    1. lichtmalerin

      4. March 2013 at 14:22

      Das würde ich auch sehr gerne lesen 🙂

    2. neele ♥

      4. March 2013 at 20:51

      Ja, das habe ich schon geplant, das Problem ist, dass man dafür im Grunde genommen eigenen Webspace benötigt, dafür wiederum muss man wissen, wie man mit FTP Dateien hochlädt und dafür benötigt man eine Software und ach, ist alles etwas komplizierter :/ aber ich werd's versuchen 😉

  4. Ally Lala

    4. March 2013 at 14:49

    Dankeschön ein toller Post.
    Super verständlich, dass selbst ich es verstehe 🙂

  5. nata

    4. March 2013 at 15:45

    Ich liebe es, was man alles so mit HTML & CSS machen kann 🙂

    my blog xx

  6. San Pi

    4. March 2013 at 18:22

    Super, ich danke dir!

  7. AIMEROSE

    4. March 2013 at 20:21

    Such a cute blog! Have a nice day!
    AIMEROSE BLOG

  8. Vita Kranz

    5. March 2013 at 7:52

    Hey könntest du vllt auch erklären, wie man den ersten Buchstaben des Titels ändert?
    Also so wie bei deinem Design 🙂

    1. neele ♥

      5. March 2013 at 8:26

      Dazu gibt es schon ein Tutorial hier auf CPL 🙂

  9. Line Sch

    9. March 2013 at 11:57

    hallo,
    ich habe eine frage,
    ich wollte mir die MINIMA Vorlage downloaden um dies zu machen, aber das klappt nicht?:o

  10. Laurén

    9. March 2013 at 14:18

    Dieses Tutorial ist genial!!! Dank deiner Hilfe sieht mein Posttitel nun vieeel besser aus 🙂 VIELEN DANK ♥

  11. Helly Berry

    10. March 2013 at 17:10

    Ich verstehe auch nicht wie man MINIMA installiert trotz der Anleitung 🙁

  12. Helly Berry

    10. March 2013 at 17:17

    Wo muss man nochmal drücken um beim HTML bearbeiten die Suchmaschine zu bekommen?

  13. eva & ich

    16. March 2013 at 23:10

    Da fängt es schon an…. Wie und wo Speicher ich vorher ein Backup?
    Würde mir gerne das Template herunterladen….
    Oh Mann, das kann was werden 🙁

  14. Labellogy s

    27. April 2014 at 11:30

    wie änder ich die Farbe von dem posttitel? auf der startweite ist es pink aber wenn man auf den post drauf klickt ist der postier grau?

    liebe grüße<3

    1. Labellogy s

      27. April 2014 at 11:48

      Hab herumgebastelt und es selbst herausgefunden 🙂 war ganz leicht hihi…..
      Danke trotzdem <3

  15. Tamara Härtl

    7. October 2015 at 20:13

    Hey,
    ist bestimmt ne blöde Frage, aber wo genau muss ich bei Blogger die Zeilen einfügen?
    Muss ich bei Vorlage auf HTML bearbeiten und dort das .post h3 suchen?
    Vielen Dank :-*

  16. Victoria Z

    4. June 2016 at 16:22

    Ich habe leider wirklich ein großes Problem ich kann meinen Posttitel nicht mehr ändern und er hat sich einfach so verändert! ich habe es im html und im Anpassen versucht aber es passiert einfach nichts !
    Hättest du eine Idee was ich jetzt machen kann? 🙂

Leave a Reply