Press + if you like it:   

Twenty Twelve, Bilder im Artikel anders präsentieren.

Immer noch einer meiner Lieblingsthemes allerdings stört mich die Präsentation der Bilder im Artikel. Wirkt irgendwie hin geklatscht, Bildtext drunter fertig. Die Mehtode ist übrigens für jeden Theme geeignet, ggf. heißen dann nur die CSS Anweisungen etwas anders.

Das geht auch anders, ein Beispiel seht ihr hier.

Eine Testbeschriftung

Und das ist sogar recht einfach zu bauen.

Dazu braucht ihr nur die Style.css zu öffnen und die Stelle:

/* Responsive images */

suchen.

Hinter:

.entry-content img,
.comment-content img,
.widget img {
max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

setzt ihr nun das hier:

.entry-content img{

margin: 0;
height: auto;
max-width: 640px;
border:1px solid #DDD;
padding:3px;
background-color:#F3F3F3;
-moz-box-shadow: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
box-shadow: 3px 3px 3px #999;
border-radius:5px;
-moz-border-radius:5px;
}

Damit bekommt das Bild einen Rahmen, einen Schatten und die Ecken des Rahmens sind abgerundet.

Nun sucht ihr die Stelle:

.wp-caption {

und tragt hinter der Klammer das hier ein (das was da vorher stand einfach löschen):

background: #F3F3F3;
border: 1px solid #DDD;
-moz-box-shadow: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
box-shadow: 3px 3px 3px #999;
border-radius:3px;
-moz-border-radius:3px;
line-height: 18px;
margin-bottom: 20px;
padding: 4px;
text-align: center;
max-width:660px;
color: #333;
}

Und schon werden die Bilder anders dargestellt und das sieht, in meinen Augen, um Längen besser aus. Natürlich kann man die Farben usw. nach Belieben anpassen.

Man könnte das Bild jetzt noch schräg setzten, aber wir wollen es ja mal nicht übertreiben.

Sharing is sexy...twitter Twenty Twelve, Bilder im Artikel anders präsentieren.0google Twenty Twelve, Bilder im Artikel anders präsentieren.1facebook Twenty Twelve, Bilder im Artikel anders präsentieren.0linkedin Twenty Twelve, Bilder im Artikel anders präsentieren.0pinterest Twenty Twelve, Bilder im Artikel anders präsentieren.0reddit Twenty Twelve, Bilder im Artikel anders präsentieren.0diggit Twenty Twelve, Bilder im Artikel anders präsentieren.tumblr Twenty Twelve, Bilder im Artikel anders präsentieren.stumbleupon Twenty Twelve, Bilder im Artikel anders präsentieren.0email Twenty Twelve, Bilder im Artikel anders präsentieren.

Eckendenker

Eckensitzender Nachdenker, , Anime und Manga verrückt, nicht wegen Animes und Mangas Japan Liebhaber, Kopf zwischen den Welten Haber, Tischplatten mit Kopf Zerstörer und eindeutig ein Gutmensch. G+ Profil   G+ Seite

Vielleicht auch interessant....

2 Kommentare

  1. Tungsten says:

    Hallo,

    danke für den Tipp. Habe es im Childtheme probiert, aber die Bilder werden nun nur noch linksbündig angezeigt. aligncenter funktionier nicht mehr, wobei der Rahmen nett aussieht. Any idea?

    Viele Grüße

    • Eckendenker says:

      Hm, wenn ich ehrlich bin nicht da mein Code das align nicht betrifft. Hast du im Childtheme in der CSS auch das Algin angeben? Falls nein, versuch das einfach mal (übernimm einfach die gesamte CSS Datei) oder sende mir diese an webmaster@ ich schau gerne mal kurz rüber

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Diese Seite verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass wir Cookies setzen.
OK
x