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 :P (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 :)

48 48 Kommentare

  1. 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

    AntwortenLöschen
  2. Versuch ich bestimmt mal :) Danke danke für dieses tolle Tutorial :)

    Liebste Grüße,
    Natalie von Paperwings-blabla

    AntwortenLöschen
  3. sehr coole Idee, ich finde nur den .post h3 irgendwie nicht? :(

    AntwortenLöschen
    Antworten
    1. Such mal nach h3.post-title :)

      Löschen
    2. bei mir genauso und wenn ich nach h3.post-titel suche, finde ich es nur mit mobile davor ? :(

      Löschen
    3. Ich auch. Ich finde h3.post-title auch nur unter mobile...:(

      Löschen
    4. Also es heißt bei euch beiden h3.post-title. Da spinnt einfach die Suche manchmal. :)

      Löschen
    5. 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!

      Löschen
    6. Auch wenn ich das mache was du gesagt hast Mira, funktioniert es einfach nicht,ich kann nicht ein Tutorial nach machen :(

      Löschen
  4. Ein sehr hilfreiches Tutorial ♥

    AntwortenLöschen
  5. Bei mir in der Vorlage will es .post h3 nicht finden :( Kann mir jemand helfen?
    Wär sehr nett.

    AntwortenLöschen
  6. Kann man sicher auch mit CSS lösen, wäre womöglich eleganter gelöst. ;)

    AntwortenLöschen
    Antworten
    1. Meinst du ohne Grafik oder wie?
      Dann zeig mir mal wie :b

      Löschen
    2. Kann mich gerne mal dran versuchen...

      Löschen
    3. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    4. @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 :)
      ?

      Löschen
    5. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
  7. 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?! ;)

    AntwortenLöschen
    Antworten
    1. Hmm, die Fotos sind aber auf dem Copypastelove-Account hochgeladen, merkwürdig :/

      Löschen
  8. 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. ;)

    AntwortenLöschen
    Antworten
    1. 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 :)

      Löschen
    2. Ich hab jeden einzelnen Pfeil ausgeklappt und es wird immer noch nicht gefunden :)

      Löschen
    3. Vielen Dank! Die hatte ich übersehen. *schäm* ;)

      Löschen
  9. 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... :/

    AntwortenLöschen
    Antworten
    1. "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

      Löschen
    2. Oops da hats mir was rausgehauen...es sollte eigtl dastehen: <b:skin>

      bitte, neele ;)

      Löschen
  10. 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

    AntwortenLöschen
  11. Das ist cool, habe mich schon lange gefragt wie das geht :D
    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?

    AntwortenLöschen
    Antworten
    1. Das selbe Problem habe ich auch, hat da jemand eine Lösung gefunden? :)

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

      Löschen
  12. Also bei mir ist alles Top nur mein ganzer post ist einfach durch gestrichen, also alle Post mit so ganz vielen Querstreifen :D

    AntwortenLöschen
  13. Ahw sieht das schick aus. Muss ich bei meinem nächsten Layout direkt mal ausprobieren. :-)

    AntwortenLöschen
  14. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  15. 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? :(

    AntwortenLöschen
    Antworten
    1. Ich kann dir nicht helfen, da dein Bloglink nicht auf deinem G+ zusehen ist.

      Löschen
  16. Yeeey nach langem rumprobieren und zeitweiligen Aufgebe-pausen hat's geklappt!<3 :-*

    AntwortenLöschen
  17. Leider ging bei mir der Link zur Grafik auch nicht auf:(

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

    AntwortenLöschen
    Antworten
    1. 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');
      background-repeat: x-repeat;
      background-position: 0px -10px;
      }

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

      Löschen
    2. 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') repeat-x;
      }

      und gib h2 diese Properties:

      background:#fff;
      width:20px;


      "h2 span" gibt es nämlich nicht ;)

      Löschen
  19. 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 <<

    AntwortenLöschen
  20. 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');
    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 ❤︎

    AntwortenLöschen
  21. Hallo zusammen Weiß vielleicht jemand, wie das Ganze für die Titel der sidebar funktioniert? :)

    Liebe Grüße,
    Laura

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.