Tutorial: Bildabstand entfernen/ändern

Freitag, 17. Januar 2014

Hi! :)
Jeder kennt das doch, man hat einen Blog und will beispielsweise eine Wunschliste (Buchblogger) erstellen, bei der alles am Ende so aussieht:

Und irgendwie sieht das einfach doof aus mit diesen Abständen, hab ich recht? 
Nun, jedenfalls saß ich gestern am Design einer Bloggerin und habe für sie eine solche erstellt. Da sie auch noch doller abgerundete Ecken hatte sah das einfach doof aus mit den Abständen, also habe ich bei copypastelove gesucht und ein Tutorial gefunden. Wie allerdings viele hat mein HTML keine Treffer angezeigt. Und da die meisten Kommentare wie immer unbantwortet blieben schreibe ich jetzt meine Lösung auf, da ich nach langem Suchen im HTML selber eine viel einfachere Art gefunden habe das Problem mit den Bildabständen zu lösen.
Und es geht ganz einfach!

Anleitung:
Ihr geht auf Vorlage -> HTML bearbeiten. Dann klickt ihr in das HTML-Gewusel und drückt die Tasten strg und F gleichzeitig. Jetzt sollte sich ein Fenster öffnen wo ihr -moz-box-shadow: einfügt. Dann sucht ihr. Sehr wahrscheinlich tauchen mehrere Stellen auf aber die Stelle die wir suchen sieht so aus (ihr könnt auch einfach bis zur 440 oder so runterscrollen!) Leute mit der Watermark-Vorlage können auch nach -moz-box-shadow: 1px suchen aber ich weiß nicht ob das auch bei allen Vorlagen so ist!:

Die Zahl 8 müsst ihr dann einfach runterstellen. 0px bedeutet: garkein Abstand, 20px bedeutet riesiger Abstand. 

Ergebnis:

PS: Ich empfehle Blogs mit arg abgerundeten Ecken (doller als beim Ergebnis) mindestens einen Abstand von 2px einzugeben & Blogs ohne abgerundeten Ecken mindestens 1px.

Kommentare:

  1. Tolle Tut das ich am nachmittag gleich anwenden werde :)
    Vielen Dank! <3

    AntwortenLöschen
  2. Ich weiß nicht woran es liegt aber wenn ich auf strg und f drücke passiert nichts (nur eben das oben rechts ein "Suche" Zeichen erscheint)

    AntwortenLöschen
    Antworten
    1. Was benutzt du denn für einen PC? Windows/Mac/Apple? Eigentlich sollte sich oben rechts ein kleines Fenster mit einer Suchleiste öffnen.

      Löschen
  3. Bei mir geht es leider nicht. Er findet fas gesuchte einfach nicht. Schade, hätte es gehabt. Liebe Grüße Hanna

    AntwortenLöschen
  4. Genau so ist es auch bei mir.Es erscheint zwar ein Suche Feld aber wenn ich eingebe was du geschrieben hast passiert nichts.

    AntwortenLöschen
  5. @Hanna und Morayo: Versucht es doch mal und sucht noch "padding". Da werden wahrscheinlich viele Ergebnisse zusammenkommen, aber ihr müsst das suchen wo .post-body img, .post-body .tr-caption-container { drübersteht :)

    AntwortenLöschen
  6. Leider sieht bei mir der Code nicht so aus wie bei dir...

    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }

    Da gibts keine 8. was soll ich jetzt machen? Kann ich da dennoch was dran ändern?

    Liebe Grüsse und danke schon mal für deine Hilfe.
    Alexandra

    AntwortenLöschen
    Antworten
    1. Hi du :)
      Wie dieser Code aussieht ist völlig wurst! Die 8 musst du weiter unten suchen. Guck dir das Tutorial und besonders den Screenshot nochmal genau an den ich oben im Post habe. Dort siehst du etwas weiter unten (Ich habe es extra rot umrandet) eine 8. Und DIE musst du ändern.

      Liebe Grüße!

      Löschen