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 :)
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 :)
Oh, was für eine tolle Idee! Das muss ich auf jeden Fall mal ausprobieren.
AntwortenLöschenDanke für die schöne Anleitung. :)
Liebe Grüße
Lisa
Versuch ich bestimmt mal :) Danke danke für dieses tolle Tutorial :)
AntwortenLöschenLiebste Grüße,
Natalie von Paperwings-blabla
sehr coole Idee, ich finde nur den .post h3 irgendwie nicht? :(
AntwortenLöschenSuch mal nach h3.post-title :)
Löschenbei mir genauso und wenn ich nach h3.post-titel suche, finde ich es nur mit mobile davor ? :(
LöschenIch auch. Ich finde h3.post-title auch nur unter mobile...:(
LöschenAlso es heißt bei euch beiden h3.post-title. Da spinnt einfach die Suche manchmal. :)
LöschenTipp: 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öschenAuch wenn ich das mache was du gesagt hast Mira, funktioniert es einfach nicht,ich kann nicht ein Tutorial nach machen :(
LöschenEin sehr hilfreiches Tutorial ♥
AntwortenLöschenSehr toll erklärt :)
AntwortenLöschenBei mir in der Vorlage will es .post h3 nicht finden :( Kann mir jemand helfen?
AntwortenLöschenWär sehr nett.
bei mir leider auch :((
LöschenKann man sicher auch mit CSS lösen, wäre womöglich eleganter gelöst. ;)
AntwortenLöschenMeinst du ohne Grafik oder wie?
LöschenDann zeig mir mal wie :b
Kann mich gerne mal dran versuchen...
LöschenDieser Kommentar wurde vom Autor entfernt.
Löschen@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?
Dieser Kommentar wurde vom Autor entfernt.
LöschenOh man, irgendwie mag mein Chrome deinen Blog einfach nicht und zeigt mir mal wieder keine Fotos vom Design an -.-
AntwortenLöschenAber 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?! ;)
Hmm, die Fotos sind aber auf dem Copypastelove-Account hochgeladen, merkwürdig :/
LöschenIch 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. ;) :(
AntwortenLöschenHilfe. ;)
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öschenIch hab jeden einzelnen Pfeil ausgeklappt und es wird immer noch nicht gefunden :)
LöschenVielen Dank! Die hatte ich übersehen. *schäm* ;)
LöschenDanke für das Tutorial :-)
AntwortenLöschenMeinst 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"Vorlage > HTML bearbeiten"
Löschenrelativ 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
Danke, Felix :D
LöschenOops da hats mir was rausgehauen...es sollte eigtl dastehen: <b:skin>
Löschenbitte, neele ;)
Hallo zusammen!
AntwortenLöschenKann 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
Das ist cool, habe mich schon lange gefragt wie das geht :D
AntwortenLöschenIch 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?
Das selbe Problem habe ich auch, hat da jemand eine Lösung gefunden? :)
LöschenDazu habe ich leider noch keine Lösung. Aber ich habe da eine Idee, müsste ich aber noch ausprobieren ;)
LöschenAlso bei mir ist alles Top nur mein ganzer post ist einfach durch gestrichen, also alle Post mit so ganz vielen Querstreifen :D
AntwortenLöschenAhw sieht das schick aus. Muss ich bei meinem nächsten Layout direkt mal ausprobieren. :-)
AntwortenLöschenDieser Kommentar wurde vom Autor entfernt.
AntwortenLöschenHey :) 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öschenIch kann dir nicht helfen, da dein Bloglink nicht auf deinem G+ zusehen ist.
LöschenYeeey nach langem rumprobieren und zeitweiligen Aufgebe-pausen hat's geklappt!<3 :-*
AntwortenLöschenLeider ging bei mir der Link zur Grafik auch nicht auf:(
AntwortenLöschenEcht cool, danke!
AntwortenLöschenKann man das auch in der Sidebar machen? Scheitere irgendwie daran. :-/
AntwortenLöschenAlso 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. :-/
LöschenSo 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;
}
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:
Löschen#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 ;)
Hallo ihr Lieben,
AntwortenLöschenich 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 <<
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.
AntwortenLöschenWenn 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 ❤︎
Hallo zusammen Weiß vielleicht jemand, wie das Ganze für die Titel der sidebar funktioniert? :)
AntwortenLöschenLiebe Grüße,
Laura