Tipps & Tutorials, tutorial

Linie im Hintergrund des Posttitels

Die Neele lässt heute endlich auch mal wieder etwas von sich hören!

 

Vielleicht haben sich einige von euch schonmal gefragt, wie man denn eigentlich eine Linie HINTER den Posttitel bekommt, ohne dass sie den Posttitel quasi durchstreicht.
 
Mir wurde diese Frage schon öfters gestellt und deswegen habe ich mir überlegt, dass es wahrscheinlich auch einige von euch interessieren würde und ein Tutorial ganz nützlich wäre.

Hier seht ihr ein Beispiel meines eigenen Blogs. Ich habe eine relativ dezente, graue Linie gewählt, die hinter der eigentlichen Überschrift unterbrochen ist, sodass diese auch lesbar bleibt.

Im Prinzip legt ihr keine Linie im klassischen Sinne hinter die Überschrift, so wie ihr sie schon als “border-bottom” oder “border-top” zum Beispiel kennt (oben/oben Strich über/unter der Überschrift), sondern es handelt sich um eine Grafik, die ihr als Hintergrund für eure Überschrift hinzufügt. Damit die Linie allerdings unterbrochen wird hinter der Überschrift, da sie ja ansonsten durchgestrichen wäre, legt ihr fest, dass der Hintergrund eures Texts, nicht des gesamten Überschrift-Tags, weiß (oder gegebenenfalls der Hintergrund eures Post-Bereichs) sein soll. Und schon ist das Kunstwerk vollbracht! Wenn ihr ganz verrückt seid, könnt ihr euch eine gestrichelte Linie einfügen oder ein anderes tolles Muster. Probiert euch einfach mal aus. Jetzt aber zum Tutorial…

Hintergrundbild (Linie) hochladen

Da es sich, wie gesagt, um ein Hintergrundbild bei der Linie handelt, müsst ihr diese auf eurem Server / bei Blogger oder einem anderen kostenlosen Hoster für Fotos hochladen. Ihr könnt dazu beispielsweise diese Grafik benutzen, wenn ihr euch die Mühe nicht selbst machen möchtet 😛 (Link öffnen, die kleine Grafik oben links via Rechtsklick abspeichern und anschließend hochladen)
 
Nun braucht ihr die URL eures hochgeladenen Bildes, also das, was in der Adresszeile eures Browsers erscheint, wenn ihr nur das Bild aufruft, manche Fotouploader stellen euch auch direkt ein Feld zur Verfügung, in dem ihr die URL sehen könnt. Dass ihr die richtige URL benutzt, erkennt ihr daran, dass die Endung “.jpg” oder “.jpeg” lautet.
 

CSS anpassen

Jetzt müsst ihr noch den CSS-Code eures Bloglayouts unter dem Reiter “Vorlage” ändern. Und zwar fügt ihr unter dieser Zeile:
.post h3 {

folgendes ein:

background-image: url('URL EURES BILDES');

background-repeat: x-repeat;

background-position: 0px -10px;
Für die “URL EURES BILDES” setzt ihr die URL von gerade eben ein, die “-10px” geben an, um wie viel das Hintergrundbild horizontal verschoben ist. Dadurch könnt ihr die Höhe eures Striches im Hintergrund anpassen.
Nun löscht ihr unter dieser Zeile:
.post h3 a, .post h3 a:visited, .post h3 strong {

folgendes raus:

display: block;

Außerdem fügt ihr folgendes zusätzlich unter einem “}” hinzu:

.post h3 a:link, span {
background-color: #ffffff;
padding-right: 5px;
padding-left: 5px;
}
“#ffffff” ist die Hintergrundfarbe eurer Überschrift, die der allgemeinen Hintergrundfarbe eures Posts entsprechen sollte. (Wenn ihr eine andere Farbe als Weiß habt, müsst ihr euch die Farbe des Hintergrunds eurer Liniengrafik dementsprechend anpassen)
Die “5px” geben an, dass neben der Überschrift jeweils 5 Pixel “frei gelassen” werden, damit die Linie dort nicht direkt wieder beginnt – das sieht einfach ästhetischer aus, könnt ihr euch verändern, wenn ihr mehr oder weniger Abstand möchtet.

 

Ich hoffe, ich konnte das Mysterium der unterbrochenen Linie im Hintergrund lösen und ihr konntet alles soweit verstehen. Falls nicht, könnt ihr gerne einen Kommentar hinterlassen 🙂

45 Comments

  1. Lisa - Mein Feenstaub

    8. May 2013 at 10:16

    Oh, was für eine tolle Idee! Das muss ich auf jeden Fall mal ausprobieren.
    Danke für die schöne Anleitung. 🙂

    Liebe Grüße
    Lisa

  2. nata

    8. May 2013 at 10:42

    Versuch ich bestimmt mal 🙂 Danke danke für dieses tolle Tutorial 🙂

    Liebste Grüße,
    Natalie von Paperwings-blabla

  3. Carina Kro

    8. May 2013 at 11:01

    sehr coole Idee, ich finde nur den .post h3 irgendwie nicht? 🙁

    1. Anonym

      10. May 2013 at 6:27

      Such mal nach h3.post-title 🙂

    2. Jenny

      10. May 2013 at 9:20

      bei mir genauso und wenn ich nach h3.post-titel suche, finde ich es nur mit mobile davor ? 🙁

    3. Fentry

      11. May 2013 at 16:37

      Ich auch. Ich finde h3.post-title auch nur unter mobile…:(

    4. Anonym

      13. May 2013 at 15:46

      Also es heißt bei euch beiden h3.post-title. Da spinnt einfach die Suche manchmal. 🙂

    5. Mira Ho

      13. May 2013 at 15:47

      Tipp: Im HTML den Cursor auf die erste Zeile setzen (also die erste Zeile anklicken) und dann suchen! Die Suchfunktion sucht nur von oben nach unten!

    6. Evelyn Wiedemann

      28. September 2013 at 13:36

      Auch wenn ich das mache was du gesagt hast Mira, funktioniert es einfach nicht,ich kann nicht ein Tutorial nach machen 🙁

  4. Colorful

    8. May 2013 at 11:23

    Ein sehr hilfreiches Tutorial ♥

  5. Isa

    8. May 2013 at 11:55

    Sehr toll erklärt 🙂

  6. Fentry

    8. May 2013 at 14:59

    Bei mir in der Vorlage will es .post h3 nicht finden 🙁 Kann mir jemand helfen?
    Wär sehr nett.

    1. Jenny

      11. May 2013 at 14:55

      bei mir leider auch :((

  7. David H

    8. May 2013 at 18:50

    Kann man sicher auch mit CSS lösen, wäre womöglich eleganter gelöst. 😉

    1. neele ♥

      8. May 2013 at 19:09

      Meinst du ohne Grafik oder wie?
      Dann zeig mir mal wie :b

    2. David H

      9. May 2013 at 15:10

      Kann mich gerne mal dran versuchen…

    3. Mademoiselle L.

      12. May 2013 at 15:19

      @Felix H, Ich interessiere mich dafür, wie du das hinbekommen hast? 🙂 Die Methode mit dem Bild finde ich immer so ein bisschen unelegant, und dann muss man auch immer ein neues bild hochladen wenn man was ändern möchte 🙂
      ?

  8. Jana

    8. May 2013 at 22:13

    Oh man, irgendwie mag mein Chrome deinen Blog einfach nicht und zeigt mir mal wieder keine Fotos vom Design an -.-

    Aber ich sehe ja die Überschrift zum Glück oben und das Tutorial ist toll erklärt 🙂

    Liebe Grüße ♥
    (Ach, und scheinbar ist deine About-Seite falsch verlinkt?! 😉

    1. neele ♥

      9. May 2013 at 16:12

      Hmm, die Fotos sind aber auf dem Copypastelove-Account hochgeladen, merkwürdig :/

  9. Kitty

    9. May 2013 at 11:52

    Ich würde das gern auf meinem blog anwenden, aber leider hat sich das "Design" zum Bearbeiten der Vorlage geändert und ich finde weder .posts, noch irgendwas anderes, was ich vorher selbst bearbeitet hatte. Bin gerad etwas überfordert. 😉 🙁
    Hilfe. 😉

    1. neele ♥

      9. May 2013 at 16:13

      Vermutlich hast du den Css-Teil nur nicht ausgeklappt, links an der Seite mit den Zeilennummern sind auch kleine Pfeile wo man den Code ausklappen kann 🙂

    2. Mona

      9. May 2013 at 19:42

      Ich hab jeden einzelnen Pfeil ausgeklappt und es wird immer noch nicht gefunden 🙂

    3. Kitty

      12. May 2013 at 15:58

      Vielen Dank! Die hatte ich übersehen. *schäm* 😉

  10. Eva Bo

    9. May 2013 at 14:06

    Danke für das Tutorial 🙂

  11. Anonym

    10. May 2013 at 14:59

    Meinst du wenn man von "Vorlage" auf "Anpassen" auf "Erweitert" und dann auf "CSS hinzufügen" klickt? Bei mir steht da nämlich gar nichts… :/

    1. Anonym

      10. May 2013 at 15:52

      "Vorlage > HTML bearbeiten"

      relativ weit oben ist dann auf der linken Seite ein Pfeil (dahinter steht ). Auf den Pfeil klicken, dann klappt der CSS-Abschnitt auf. Und in dem frisch aufgeklappten Abschnitt darfste suchen 🙂

      // lg

    2. Anonym

      11. May 2013 at 6:15

      Oops da hats mir was rausgehauen…es sollte eigtl dastehen: <b:skin>

      bitte, neele 😉

  12. Krisi

    12. May 2013 at 9:55

    Hallo zusammen!
    Kann mir jemand von euch helfen? Ich habe mit Hilfe eurer Anleitungen schon angefangen ein neues Design zu erstellen und soweit bin ich schon ganz zufrieden damit. Allerdings habe ich noch eine Sache die mich stört:
    Bei der Vorlage "Fantastisch" ist oben hinter dem Header so ein Türkisfarbener Streifen. Könnt ihr mir sagen wie ich den weg bekomme?

    http://krisi-testblog.blogspot.de/

    Lg Krisi

  13. Keziaa

    12. May 2013 at 15:11

    Das ist cool, habe mich schon lange gefragt wie das geht 😀
    Ich bin auch total zufrieden damit, nur leider ist es bei mir so, dass es ganz durchgestrichen ist, wenn ich auf den Posttitel gehe und mir den Post ansehe.
    Weiß jemand wie ich es weg bekomme?

    1. Lisa Marie

      15. November 2013 at 17:29

      Das selbe Problem habe ich auch, hat da jemand eine Lösung gefunden? 🙂

    2. lovemira

      15. November 2013 at 20:43

      Dazu habe ich leider noch keine Lösung. Aber ich habe da eine Idee, müsste ich aber noch ausprobieren 😉

  14. denise meyer

    14. May 2013 at 15:32

    Also bei mir ist alles Top nur mein ganzer post ist einfach durch gestrichen, also alle Post mit so ganz vielen Querstreifen 😀

  15. S a b r i n a

    14. May 2013 at 20:13

    Ahw sieht das schick aus. Muss ich bei meinem nächsten Layout direkt mal ausprobieren. 🙂

  16. Nancy D.

    25. June 2013 at 14:37

    Hey 🙂 ich finde iwie weder ".post h3 {" noch "h3.post-title" noch ".post h3 a, .post h3 a:visited, .post h3 strong {" -.- kann mir jemand helfen? 🙁

    1. lovemira

      5. July 2013 at 17:02

      Ich kann dir nicht helfen, da dein Bloglink nicht auf deinem G+ zusehen ist.

  17. Leo

    30. June 2013 at 15:46

    Yeeey nach langem rumprobieren und zeitweiligen Aufgebe-pausen hat's geklappt!<3 :-*

  18. Ally Daysleeper

    13. July 2013 at 15:37

    Leider ging bei mir der Link zur Grafik auch nicht auf:(

  19. Chamy

    9. September 2013 at 23:03

    Kann man das auch in der Sidebar machen? Scheitere irgendwie daran. :-/

    1. Chamy

      10. September 2013 at 7:53

      Also mit dem Strich das habe ich testhalber hinbekommen (muss ich halt noch alles in Höhe, Farbe, etc. anpassen), allerdings scheitere ich an den "Aussparungen", denn im Moment wird mein Text noch durchgestrichen. :-/

      So sieht's bei mir im HTML-Code aus. H2, die Überschrift für die Sidebar und den Teil von euch unten eingefügt. Soweit so gut… nur ich denke beim unteren Teil stimmt was nicht, denn das wird nicht übernommen.

      h2 {
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: lowercase;
      text-align: center;
      padding: 0px; margin: 0px;
      font-weight: normal;
      background-image: url('http://1.bp.blogspot.com/-0VsYgvhf9IQ/UYlroA6y-gI/AAAAAAAACbA/6KRmsTn8228/s1600/line.jpg&#39;);
      background-repeat: x-repeat;
      background-position: 0px -10px;
      }

      .post h2 a:link, span {
      background-color: #ffffff;
      padding-right: 5px;
      padding-left: 5px;
      }

    2. lovemira

      10. September 2013 at 12:00

      Ich habe es gestern auch versucht. Probier mal den Linien-Hintergrund nicht bei h2 sondern beim Gadget direkt als Hintergrund einzufügen. Am besten so:

      #ID1{
      background-image: url('http://1.bp.blogspot.com/-0VsYgvhf9IQ/UYlroA6y-gI/AAAAAAAACbA/6KRmsTn8228/s1600/line.jpg&#39😉 repeat-x;
      }

      und gib h2 diese Properties:

      background:#fff;
      width:20px;

      "h2 span" gibt es nämlich nicht 😉

  20. Joe

    31. December 2013 at 11:42

    Hallo ihr Lieben,

    ich habe es auch probiert und auf der normalen Blog-Seite funktioniert es auch.
    Klickt man aber einen Post direkt an wird der Titel durchgestrichen.

    Könnt ihr mir da nochmal helfen?

    Joe ♥

    >> THE BIG MASH UP <<

  21. Josie Papaya

    2. January 2014 at 16:41

    Hat alles bei mir funktioniert als ich es bei "h3.post-title, .comments h4 {" eingefügt habe, zumindest auf der Homeseite, wenn der Posttitel noch ein Link ist. Leider konnte ich ".post h3 {" nicht finden.

    Wenn ich auf die Seite vom Post komme, ist der Titel einfach durchgestrichen, also der Strich geht auch durch den Hintergrund vom Titel.

    Mein Quelltest hierzu sieht folgendermaßen aus:

    h3.post-title, .comments h4 {
    background-image: url('http://i40.tinypic.com/2aka4at.jpg&#39;);
    background-repeat: x-repeat;
    background-position: 0px -0px;
    font: normal normal 34px 'Times New Roman', Times, FreeSerif, serif;
    margin: .75em 0 0;
    text-align: center
    }
    .post h3 a:link, span {
    background-color: #ffffff;
    padding-right: 7px;
    padding-left: 7px;
    }

    Hab ich irgendwas falsch gemacht?

    LG Josie ❤︎

  22. Laura

    2. September 2016 at 7:04

    Hallo zusammen Weiß vielleicht jemand, wie das Ganze für die Titel der sidebar funktioniert? 🙂

    Liebe Grüße,
    Laura

Leave a Reply