Dreibeinblog – » Zuki-Theme Beitragsbilder mit Rahmen versehen

Beim sehr schönen Zuki-Theme von Elmastudios, das ich derzeit hier im Dreibeinblog verwende (Stand März 2015), werden die Beitragsbilder (Thumbnails) in ganz hervorragender Weise eingesetzt.
Leider ergibt sich bei Bildern mit weißem Hintergrund und ohne Rahmen eine Darstellung, bei der die gezeigten Objekte mitunter ziemlich leer im Raum stehen.
Es fehlt eine äußere optische Begrenzung.

Das sieht dann beispielsweise so aus:

Schöner wäre es mit einem Rahmen:

/*****************************************/
/*  Beitragsbilder Rahmen                */
/*****************************************/

.entry-thumb {
    position: relative;  
    border: 2px solid #eeeeee;
    padding-bottom: 0px !Important;
}

.entry-thumb a {
	display: block !important;
	line-height: 0 !important;
   	box-shadow: 3px 24px 20px -24px #000000 !important;
    padding-bottom: 0px !Important;
}

.entry-thumb:before,
.entry-thumb:after {
  position: absolute !important;
  content: "" !important;
  width: 20% !important;
  bottom: 0px !important;
  box-shadow: 0 0 12px 10px rgba(0, 0, 0, 0.3) !important;
  z-index: -10 !important;
 }

.entry-thumb:before {
  -webkit-transform: skew(0deg, -10deg);
  -ms-transform: skewX(0deg) skewY(-10deg);
  transform: skew(0deg, -10deg);
  left: 24px;
}
.entry-thumb:after {
  -webkit-transform: skew(0deg, 10deg);
  -ms-transform: skewX(0deg) skewY(10deg);
  transform: skew(0deg, 10deg);
  right: 24px;
}

Für den reinen Rahmen sind die beiden ersten CSS-Anweisungen .entry-thumb und .entry-thumb a verantwortlich.
Der Rest sorgt für den Schlagschatten unter den Bildern.

Wer also nur den Rahmen haben möchte, kann die before und after-Anweisungen weglassen.

Wenn dieser Rahmen auch in der Einzelartikelansicht hinzugefügt werden soll, kommt folgender Code zum Einsatz:

/*****************************************/
/*  Beitragsbilder Rahmen                */
/*****************************************/

.entry-thumbnail, .entry-thumb {
  position: relative;  
border: 2px solid #eeeeee;
    padding-bottom: 0px !Important;
}

.entry-thumbnail, .entry-thumb a {
	display: block !important;
	line-height: 0 !important;
   	box-shadow: 3px 24px 20px -24px #000000 !important;
    padding-bottom: 0px !Important;
}

.entry-thumbnail:before, .entry-thumbnail:after, .entry-thumb:before,
.entry-thumb:after {
  position: absolute !important;
  content: "" !important;
  width: 20% !important;
  bottom: 0px !important;
  box-shadow: 0 0 12px 10px rgba(0, 0, 0, 0.3) !important;
  z-index: -10 !important;
 }

.entry-thumbnail:before, .entry-thumb:before {
  -webkit-transform: skew(0deg, -10deg);
  -ms-transform: skewX(0deg) skewY(-10deg);
  transform: skew(0deg, -10deg);
  left: 24px;
}
.entry-thumbnail:after, .entry-thumb:after {
  -webkit-transform: skew(0deg, 10deg);
  -ms-transform: skewX(0deg) skewY(10deg);
  transform: skew(0deg, 10deg);
  right: 24px;
}
.entry-thumbnail {
margin-bottom: 30px !Important;
}

Hierbei werden nicht nur die .entry-thumb auf der Startseite angesprochen, sondern mit .entry-thumbnail auch die Bilder auf den Einzelartikelseiten.
Wichtig ist die letzte Anweisung, die dafür sorgt, daß in der Einzelartikelansicht der Text nicht im Schatten unten am Bild klebt.

Falls Du die Code Schnipsel, die ans Ende Deiner CSS (im besten Fall eines Childthemes) gehören, verwenden möchtest, würde ich mich sehr darüber freuen und bitte um einen kurzen Kommentar.