Hallo liebe Copypastelove-Leser,
mein Name ist Lena und ich darf euch heute erklären, wie ihr Bildrahmen, -abstand und –einschub auf eurem Blog entfernen könnt. Vielleicht kennt ihr das ja schon von den bekannteren Fotoblogs. Dort sieht alles, vor allem bei vielen Bildern und Text im Blocksatz schön einheitlich aus.
Hier mal zwei Bilder zum Vergleich:
Vorher Nachher
WICHTIG: Ich gehe hier nur von den Vorlagen aus dem Vorlagendesigner aus, mit den alten kenne ich mich leider nicht so gut aus, deshalb kann es sein, dass dieses Tutorial nicht auf allen Blogs klappt!
Schritt 1
Klickt von eurem Dashboard aus auf den Bereich „Vorlage“. Dort findet ihr oben rechts den Button „Backup/ Wiederherstellung“. Ladet dort erstmal zur Sicherheit eure Vorlage herunter, damit euer Design nicht verloren ist, falls etwas beim Tutorial schief geht.
Schritt 2
Klickt nun auf den Button „HTML bearbeiten“. Hier erscheint jetzt eine Warnung, dass ihr eventuell eure Vorlage zerstören könnt, wenn ihr HTML-Einstellungen verändert. Da wir die Vorlage aber vorher gesichert haben, könnt ihr ruhig auf „Fortfahren“ klicken. Da kann euch nichts passieren.
Schritt 3
Sucht nun mit „STRG + F“ nach Folgendem:
.post-body img
Nun müsste vor euch dieser Bereich erscheinen:
Schritt 4
Nun müsst ihr den rot markierten Teil aus eurem HTML-Code komplett löschen. Dieser steht für den Rahmen und den Schatten um die Bilder. Achtet dabei unbedingt darauf, dass ihr die } am Ende nicht entfernt!
Den grün markierten Teil ersetzt ihr nun durch
0px;
Außerdem ergänzt ihr unter dem oberen „padding“
margin-left: -12px;
Jetzt hätten eure Bilder noch einen ganz dünnen Abstand, wenn ihr sie untereinander anordnet.
Wollt ihr aber gar keinen Abstand mehr, ergänzt stattdessen
margin: -12px;
Klickt jetzt auf „Speichern“.
Schritt 5
Jetzt müsst ihr nur noch die richtige Breite für euren Blog einstellen. Das geht ganz einfach mit dem Vorlagendesigner unter „Breite anpassen“. Verschiebt den Regler einfach so lange, bis Text und Bilder „auf einer senkrechten Linie“ sind bzw. an der gleichen Stelle beginnen.
Gar nicht so kompliziert, oder?
Falls trotzdem etwas nicht geklappt haben sollte, schreibt doch bitte in einem Kommentar, was genau nicht funktioniert. Ich werde dann versuchen euch so gut es zu helfen!
Lena
sehr gut erklärt, danke! :*
AntwortenLöschen... hat soweit gut funktioniert, klappt aber nicht mit nebeneinanderstehenden Bildern? Bekomme ich jene auch noch auf eine Linie? Habe es schon mit Zentrieren versucht, was in dem Fall aber nichts bringt. Sonst würde ich wohl einen Rückwärtsgang einlegen, denn diese Anordnung der Bilder benötige ich relativ oft...
AntwortenLöschenBeispielsweise hier:
http://spielpause.blogspot.de/2012/07/grunzeug-spitzwegerich-olt-muckenstich.html
Danke im Voraus, herzliche Grüße Marja
Noch etwas fällt mir auf: die drei Vorschläge zum Weiterblättern am Ende jedes Posts sind nicht mit auf die imaginäre Linie gerutscht...? LG, Marja
LöschenOhje... nachdem ich nun Post für Post alle betroffenen Bilder wenigstens mittig gerückt habe, fällt mir auf, dass der Text gar nicht im Block erscheint. Auch nicht, wenn ich das im Post entsprechend bearbeite. Habe jetzt erstmal wiederhergestellt und bin mir plötzlich auch nicht mehr sicher, ob wenigstens das funktioniert hat. Schade, dabei war es wieder eines dieser wunderbaren doch eigentlich idiotensicheren Tutorials... Herzliche Grüße, marja
LöschenAlso wie das bei mehreren Bildern funktioniert, weiß ich leider auch nicht... tut mir leid. Es ist halt so darauf ausgelegt, dass einzelne Bilder, wenn sie im Editor "zentriert" angeordnet werden dann einheitlich sind. Aber wie das bei mehreren funktioniert... :/ Du kannst es höchstens so machen, dass du sie dann immer in einer Collage hochlädtst.
LöschenMeintest du das Link-Within-Gadget? Oder den Blog-Pager? (also "neuere Posts", "ältere Posts")
Tut mir leid, dass ich dir jetzt so wenige helfen konnte... :(
Liebe Lena, erstmal dankeschön... ich meine das Link-Within-Gadget, aber damit werde ich wohl leben, oder es einfach wieder rausnehmen... ich werde mich wohl mal in die Collagen einfuchsen müssen.
LöschenDen Blocktext fand ich übrigens nicht so zufriedenstellend, gibt es da auch noch einen Trick? Oder liegt es nur an zu wenig Text? Anderswo sieht das noch immer schöner aus.
Den Text muß ich manuell für jeden Post im Posteditor auf Blocktext umstellen?
Vielen lieben Dank trotzdem und herzliche Grüße, Marja
Nochmal bezüglich des Blocksatzes. Ich habe nun herausgefunden, was mich stört. Es ist der Zeilenabstand. Den hätte ich gern kleiner... Mache mich mal auf die Suche... LG, Marja
LöschenJa, das mit Blocksatz muss man manuel für jeden einzelnen Post einstellen. Ist sicher sehr mühsam, wenn man das erst nachträglich machen muss, aber ich finde es sieht so viel schöner aus! :) Allerdings wirkt er - wie du schon sagtest - eher, wenn man mehr Text schreibt.
LöschenFür den Zeilenabstand gibt's hier auch ein Tutorial: http://www.copypastelove.org/2011/04/zeilenabstand-verandern-text.html
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschen* Hat alles super gut geklappt. Dankeschöön! :D
AntwortenLöschenTolles Tutorial und sehr gut erklärt, nur leider bringts bei mir nichts.. Ich hab alles genauso gemacht, aber mein Abstand ist immernoch der Gleiche..
AntwortenLöschenxx
Also bei dem zweiten "padding" fehlt das Semikolon (;) am Ende. ;)
LöschenUnd dann ist auch immer wichtig, dass ihr eure Bilder im Post-Editor auf "zentriert" einstellt. Sonst klappt es nicht!
Vielen lieben Dank für das Tutorial, habe es mal gleich gemacht und es hat super geklappt. Nur beim Bildabstand musste ich eine andere Pixelzahl eingeben, da sich die Bilder sonst überlappen würden, ich musste für exakt aneinandergrenzende Bilder "margin: -3 px;" eingeben, ich denke, das richtet sich abet immer nach der genauen Vorlage und den Einstellungen des Blogs. Ist aber nicht weiter schlimm, ich habe es ja hinbekommen. Danke und liebe Grüße :)
AntwortenLöschenAh, okay. Das kann sein, das da manchmal eine andere Pixelzahn hin muss. Bei mir hat es aber eigentlich mit den 12 geklappt, aber durch probieren hab ich auch immer ganz viel dazugelernt ;)
Löschendanke, jetzt fangen bild und text links endlich auf einer linie an.
AntwortenLöschensuper erklärt.
LG
ich konnte .post-body img zuerst nicht finden.
AntwortenLöschenDann habe ich img bis zu dem y von body gelöscht und per Hand hingeschrieben. Dann hats funktioniert. Kannst du mir das erklären?
ging mir genauso. ohne img habe ich es gefunden...
LöschenDas img ist aber wichtig, weil genau der Teil die Bilder beschreibt.
LöschenVielleicht ist das ganze auch anders bezeichnet, aber img ist eigentlich immer drin!
img war durchaus wie oben beschrieben vorhanden, aber die Suche danach hat merkwürdigerweise nicht funktioniert...
Löschenbei war es genauso :-)
LöschenTolles tutorial wegen den Rahmen um die Bilder, aber für das einstellen mit dem Text und Bildern bündig ist es bei mir nix, da mein Blog auf die Grösse eingestellt ist, wegen dem Header, der Sidebar etc. Stell ich da jetzt die Breite um, passt das alles nicht mehr. Da muss ich mir mal noch was anderes einfallen lassen. Bei mir ist auch immer das Problem, obwohl ich die Bilder (Quer- und Hochformat) gleich speichere in der Grösse, dass sie dann doch noch etwas unterschiedlich sind. Naja, wird schon noch :)
AntwortenLöschenDankeschön es hat mir sehr geholfen und ich mag mein design jetzt auch mehr :))
AntwortenLöschenAber ich habe ein Problem bei den seiten widged ist unter den überschriften bei mir ein strich und der ist etwas zu lang wie kann ich seine länge ändern ,dass es nicht über den Rand geht ?
Würde mich freuen wenn ihr mir helfen könntet
LG Julia
http://daslebenhatvielewege.blogspot.de/
Hat sich schon geklärt :))
Löschenich hab es selber gefunden :)
Ich hab auch ganz lange damit gelämpft, deshalb wollte ich es auch gerne als Tutorial veröffentlichen. Mir hat es wirklich den letzten Nerv geraubt :D
AntwortenLöschenZuerst einmal dankeschön für das Tutorial :)
AntwortenLöschenLeider klappt es bei mir aber nicht, schon beim Suchen nach " .post-body img " scheitert's bei mir. Ich habe auch schon versucht, nur "post-body" zu suchen, was auch geklappt hat mit 2 Übereinstimmungen. Leider ist aber nirgendwo das, was ich suche.
Liebe Grüße,
Louisa
Okay, versuch erstmal folgendes: Such nach ".post img, table.tr-caption-container {" und ersetze die 4px durch 0px und füge das "margin-left: -12px;" dort ein.
LöschenWenn das nicht klappen sollte, fügst du ÜBER dem ".post img, table.tr-caption-container {" folgendes ein:
.post-body img {
padding: 0px;
margin-left: -12px;
}
Ich hoffe, das eins der beiden Dinge funktioniert (:
Danke für das tutorial! leider hat es bei mir auch nicht wirklich hingehauen.
AntwortenLöschenBei mir ist es so, dass meine bilder keinen abstand haben, ich aber einen kleinen abstand haben möchte, aber einen nicht zu großen. genauso möchte ich, dass der text an der gleichen stelle anfängt wie die bilder, wie du oben beschrieben hast, aber das klappt leider auch nicht. ich hoffe du kannst mir helfen, schau doch mal auf meinen blog, falls es dir was hilft. http://moments-capture.blogspot.com/
dankeschön!
Hmn, das ist wirklich seltsam. Hast du vorher mal irgendwas am Quellcode geändert?
AntwortenLöschenWar das mit dem Abstand schon vorher so oder erst nachdem du das Tutorial gemacht hast?
Für einen ganz kleinen Abstand könntest du bei padding 1px einfügen.
Ansonsten könnte es nur sein, dass es irgendwie an deiner Vorlage liegt, aber genau kann ich dir das auch nicht sagen. Tut mir leid! :(
das mit den kleinen abständen zwischen den bildern hat zwar gut funktioniert, aber jetzt sind meine kommentare nicht mehr in der mitte? weißt du woran das liegt? ich kann mir das nicht erklären
AntwortenLöschenaußerdem klappt das mit dem bildern und text genau nebeneinander nicht. wenn ich im layout die breite anpasse ist es nie genau nebeneinander.
liebe grüße!
Hö? Was haben die Kommentare denn damit zu tun? Da kann ich dir leider auch nicht weiterhelfen. Entschuldige!
LöschenDu kannst es höchstens mal mit einer anderen Pixelzahl versuchen, weiter oben hat das auch bei jemandem geklappt ;)
Danke es hat sehr gut geklappt! Man kanns auch leicht auf die neuen vorlagen übetragen. Die ist einfach etwas kürzer, zb. gibts nur einmal padding.
AntwortenLöschenSo sieht der abschnitt dann aus:
}
.post-body img {
padding: opx; margin-left: -12px;
}
Mich hat es schon so lange genervt dass der text immer absteht!! Jetzt ist alles schön sauber und einheitlich
Es ist ja auch eigentlich eher für die neuen Vorlagen gedacht ;)
LöschenHey ich hab deine Anweisungen angewendet ;)
AntwortenLöschenAber ich bin mir nicht ganz sicher, ob es geklappt hat und wenn ja,dann würde ich gerne noch weniger Abstand zwischen den Bildern haben wie zum Beispiel bei dem Blog: http://marisanatalie.blogspot.de/
Ich hoffe du kannst mir helfen :)
Liebe Grüße
Probier's mal mit dem "margin: -12px;"-Code. Dann hast du gar keinen Abstand mehr (:
LöschenHallo, das Tutorial sieht auf den erten Blick ja super erklärt aus und ich habe hier im Blog schon einige ausgetestet. Leider sieht mein Quellcode ganz anders aus. nichts von dem was du zum suche angegeben hast - aus nicht im den kommentaren- findet sich. nicht mals verkürzt. vielleicht kannst du mir noch weiterhelfen: sandra-bart.blogspot.com
AntwortenLöschenDu kannst den Teil auch manuell einfügen, also komplett neu dazuschreiben. Das müsste dann auch gehen (:
Löschenoh cool danke !! :)
AntwortenLöschenHallöchen, super Tutorial! :-)
AntwortenLöschenAllerdings gibt es bei mir nicht den Blocksatz :( Die Schrift sieht aus wie vorher...
Gibt es da eine Lösung?
Schau mal unter "Textabsätze ausrichten"
LöschenKlick hier
Einfach im HTML-Teil vom Post-Editor einsetzen :)
ich finde das .post-body img nicht, kann es daran liegen dass ich das alte design habe?
AntwortenLöschenGut möglich, aber ich hab auch am Anfang geschrieben, dass sich das Ganze auf den Vorlagendesigner bezieht. Tut mir leid!
Löschendankeschön hat super geklappt :))
AntwortenLöschenweist du wie man youtube-videos und bilder auf eine linie bekommt? bei mir ist das immer so mies versetzt.
AntwortenLöschenjuhu,endlich weiß ich wies geht ! :D
AntwortenLöschensuper erklärt !:)
Bei mir sieht das Ganze so aus, d.h. -mox-box usw. kommt erst viel weiter unten, als bei dir, was mache ich jetzt?
AntwortenLöschen.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
Das ist nicht so schlimm, wenn das da nicht steht, hast du von der Vorlage aus schon keinen Schatten um die Bilder, brauchst also nichts entfernen! ;)
LöschenAnsonsten funktioniert es genauso wie bei mir oben!
sehr schön erklärt,
AntwortenLöschennach diesem post hab ich schon lange gesucht!;)
leider hat sich der abstand gar nicht verändert! :(
AntwortenLöschenich finde .post-body img einfach nirgends in meinem html code...
AntwortenLöschenhab alles probiert, was mache ich falsch?
Ich hab mal bei dir geguckt, du hast das tatsächlich nicht, komisch ...
LöschenDann musst du es manuell einfügen, such mal nach
.post-body {
line-height: 1.6;
position: relative;
}
und füg
.post-body img {
padding: 0px;
margin-left: -12px;
}
gleich darunter ein.
also irgendwie funktioniert das nicht :(
Löschenich hab es eingefügt, aber es sieht trotzdem anders aus...
ich finde den bereich auch nicht,woran liegt das denn?:(((
AntwortenLöschenAlso bei dir sieht die Stelle so aus:
Löschen.post-body img {max-width:99%; vertical-align:middle; }
padding: 8px;
vertical-align:middle
}
Ersetz die 8px durch 0px und füg in die Zeile darunter
margin-left: -12px;
ein
Also bei mir klappt irgendwie garnichts. Wenn ich das .post-body img eingebe kommt schon einmal etwas ganz anderes als bei dir. Ich weiß auch nicht woran es liegt. Voll doof. -.-
AntwortenLöschenAuch bei dir gibt's von der Vorlage aus keinen Rahmen oder Schatten, du musst nur den Einschub entfernen und dazu ersetzt du die 8px bei padding durch 0px und fügst das margin-left: -12px ein.
LöschenWichtig ist nicht, wie es am Anfang aussieht, sondern nur, dass am Ende alles so aussieht:
.post-body img {
padding: 0px;
margin-left: -12px;
}
OMG ! *__* Endlich sieht mein Blog durch diesen Tutorial gescheidt aus ! :D ♥
AntwortenLöschenDankeschön für diesen Tut, hat mir richtig geholfen ! :)) ♥ :**
Lieber Gruß von An :)) ♥
Bei mir geht das auch nicht .. :( irgendwie ist mein Blog anders .. Den HMTL Code gibts bei mir nicht:/
AntwortenLöschenDas ist der: http://unsaidx.blogspot.de/
hey :)
AntwortenLöschenwenn man unter margin-left:-12px; Margin-bottom:-15px; einfühgt kriegt man ein dünnen abstand zwischen den Bildern wie auf meinem blog :)
LG
ich will aber auch den weißen rand wegahaben:/
LöschenOh, das ist ja cool. Da hab ich das margin-bottom noch garnicht probiert, obwohl ich den sonst fast nur noch verwende ;)
Löschenhey wie soll das funktionieren mit den dünnen abständen? ich hab das probiert mit dem margin-bottom passiert aber nichts!
Löschenich will aber auch den weißen rand wegahaben:/
AntwortenLöschenJetzt hast du ihn doch weg, oder?
Löschenbei mir funktioniert da irgendwie garnichts :-(
AntwortenLöschenhey, kann mir irgendeiner sagen BITTE wie ich so einen dünnen abstand zwischen die bilder bekomme, UND wie macht man dass die hochkant genauso breit sind wie quere Bilder
AntwortenLöschenHier ist ein bsp: http://the-riot-is-back.blogspot.de/
Danke danke danke!! hat bei mir super funktioniert!!
AntwortenLöschen<3
Vielen Dank !
AntwortenLöschenIch hab schon solange rumgefragt ob vielleicht jemand weiß wie das geht & jetzt seh ich hier dieses tolle tutorial! Alles hat wunderbar geklappt & mein Blog gefällt mir jetzt viel besser :) Danke xx
heii, ich finde die ganze sache zwar super erklärt, allerdings gibt es bei mir nirgendwo 'padding'..
AntwortenLöschenwürde mich freuen, wenn du mir weiterhelfen könntest ((:
Hallo,
AntwortenLöschenvielen lieben Dank für die ganzen tollen Tutorials. Ich habe das Grey Sunflowers Template und finde leider nicht, wo die Änderung genau reinkommt.
Ich habe immer hier bei .post img geändert, ist das richtig?
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:0;
}
.post blockquote {
margin:1em 20px;
}
Vielleicht kannst du mir weiterhelfen?
Liebe Grüße!
Hallo, ich wollte schon ewig, dass mein text an der kante von dem linken bildrand anfängt, aber auch mit dem hier bekomm ichs einfahc nicht hin. hast du einen tipp?
AntwortenLöschenWo genaus muss denn margin left hin? weil beim "anpassen" --> "breite einstellen" geht es nicht auf die gleiche kante.
wäre toll wenn du mir helfen könntest. BITTE
bei mir findests ".post-body img" gar nicht erst :/ kann mir da jemand helfen?
AntwortenLöschenGibt es auch noch eine andere möglichkeit die breite des Textes einzustellen, denn auf diese Art bekomme ich es einfach nicht hin. HILFE!
AntwortenLöschenMFG Lea
http://www.l-smdt.blogspot.de
hat super geklappt, Riesenlob, war einfach toll erklärt :)
AntwortenLöschenalso den Abstand zwischen den einzelnen Bildern kann ich problemlos verändern, aber mein Text ist viel breiter als die Bilder.
AntwortenLöschenUnd da ich meinen Blog auch weiterhin so breit haben möchte wie er jetzt ist, will ich den Schiebregler auch nicht so einstellen, dass die Texte so breit sind wie die Bilder...
Allgemein würde ich lieber die Bildgröße erhöhen und sozusagen auf die Textbreite anpassen.
Geht das hiermit auch? Weil bisher hab ich es nur geschafft, die Bilder nach links oder rechts zu bewegen.
Mein Blog ist http://mckatyy.blogspot.de falls das hilft ^^
lg♥
ok ich habs glaub ich doch einigermaßen hingekriegt, für alle die vlt das gleiche problem haben.
Löschenich hab einfach noch unter dieses margin-left
"height" und "width" angegeben, beides in prozent, und wenn ich "width: 100%;" eingebe, wird das Bild so breit wie der Text... ich weiß nicht ob das jetzt die professionelle Art und Weise war, das zu machen aber es sieht schonmal etwas besser aus
Hallo ihr Lieben!
AntwortenLöschenIch war ja so was von froh als ich diese ANleitung endlich fand! GENAU das was ich brauche! Sllerdings habe ich nun ALLES, aber auch ALLES probiert! Es funktioniert nichts! Rein gar nichts! Egal wo ich etwas ändere! BITTE BITTE helft mir! Es ist sicher etwas ganz simples was ich übersehe, aber ich komm einfach nicht drauf!
Ich find zum einen die Stelle einfach nicht, ich habe alles durchgeguckt! Und zum anderen, soll sich der Abstand zwischen den einzelnen Bildern ändern UND Test und Bild in einer Flucht sein oder habe ich das nun völlig falsch verstanden? Wie gesagt, es tut sich rein gar nichts von alledem!
Liebste Grüße von einem völlig verzweifelten absoluten Fan Eurer Seite!
Louise
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschenhat alles super geklappt! aber jetzt ist bei mir kein abstand zwischen post & posttitel.. wie bekomm ich das wieder hin? :)
AntwortenLöschenLG
Und was ist wenn die Suche dieses .post-body img gar nihct erst findet?
AntwortenLöschenHallo, ich hab jetzt aber gleich mal ne Frage, das HTML-Design hat sich ja jetzt "etwas" verändert. Und jetzt passiert bei mir folgendes:
AntwortenLöschenWenn ich dieses ".post-body img" eingebe, dann findet es das nicht mehr .... Was muss ich jetzt tun? Heisst es jetzt irgendwie anders, oder was ist das Problem? :-/ Danke schon mal im Vorraus!!
Gruss, Dominique
Das Problem hab ich auch!
LöschenBitte um schnelle Antwort :)
Hahaha, ich glaube da können wir noch lange warten.... kommt wohl nix mehr ^^
LöschenVielen vielen Dank, ich bin so happy das ich Eure Seite gefunden habe!
AntwortenLöschenIch habe so lange nach einer verständlichen Anleitung gesucht und Dank Euch endlich gefunden.
Die Bitte lesen Box: Wichtige Posts! ist toll, denn ohne die Infos über den neuen HTML Editor, hätte ich das niemals gefunden...
Thank you, you are so wonderful ;-)have a nice weekend
Jess von candywrappedappletree.blogspot.de
Ich versuch das kläglich bei der dynamischen Ansicht aber das funktioniert überhaupt nicht:-(
AntwortenLöschenhast du nen tipp?
Ohje ich bin alle Kommentare durchgegangen und finde einfach NICHTS bei den HTML. Kannst du mir da irgendwie helfen? :-)
AntwortenLöschenhttp://www.cause-imma-girl.blogspot.de/
Hallo! Ich habe ein Problem, und zwar finde ich keins der Sachen, also ich habe meine HTML durchsucht und es wurden immer 0 Treffer angezeigt!
AntwortenLöschen