-Anzeige-
#ss#
-Anzeige-


Zuki-Theme Beitragsbilder mit Rahmen versehen

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:

thummaster

Schöner wäre es mit einem Rahmen:

thummaster4

  1. /*****************************************/
  2. /*  Beitragsbilder Rahmen                */
  3. /*****************************************/
  4.  
  5. .entry-thumb {
  6.     position: relative;  
  7.     border: 2px solid #eeeeee;
  8.     padding-bottom: 0px !Important;
  9. }
  10.  
  11. .entry-thumb a {
  12. 	display: block !important;
  13. 	line-height: 0 !important;
  14.    	box-shadow: 3px 24px 20px -24px #000000 !important;
  15.     padding-bottom: 0px !Important;
  16. }
  17.  
  18. .entry-thumb:before,
  19. .entry-thumb:after {
  20.   position: absolute !important;
  21.   content: "" !important;
  22.   width: 20% !important;
  23.   bottom: 0px !important;
  24.   box-shadow: 0 0 12px 10px rgba(0, 0, 0, 0.3) !important;
  25.   z-index: -10 !important;
  26.  }
  27.  
  28. .entry-thumb:before {
  29.   -webkit-transform: skew(0deg, -10deg);
  30.   -ms-transform: skewX(0deg) skewY(-10deg);
  31.   transform: skew(0deg, -10deg);
  32.   left: 24px;
  33. }
  34. .entry-thumb:after {
  35.   -webkit-transform: skew(0deg, 10deg);
  36.   -ms-transform: skewX(0deg) skewY(10deg);
  37.   transform: skew(0deg, 10deg);
  38.   right: 24px;
  39. }

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:

  1. /*****************************************/
  2. /*  Beitragsbilder Rahmen                */
  3. /*****************************************/
  4.  
  5. .entry-thumbnail, .entry-thumb {
  6.   position: relative;  
  7. border: 2px solid #eeeeee;
  8.     padding-bottom: 0px !Important;
  9. }
  10.  
  11. .entry-thumbnail, .entry-thumb a {
  12. 	display: block !important;
  13. 	line-height: 0 !important;
  14.    	box-shadow: 3px 24px 20px -24px #000000 !important;
  15.     padding-bottom: 0px !Important;
  16. }
  17.  
  18. .entry-thumbnail:before, .entry-thumbnail:after, .entry-thumb:before,
  19. .entry-thumb:after {
  20.   position: absolute !important;
  21.   content: "" !important;
  22.   width: 20% !important;
  23.   bottom: 0px !important;
  24.   box-shadow: 0 0 12px 10px rgba(0, 0, 0, 0.3) !important;
  25.   z-index: -10 !important;
  26.  }
  27.  
  28. .entry-thumbnail:before, .entry-thumb:before {
  29.   -webkit-transform: skew(0deg, -10deg);
  30.   -ms-transform: skewX(0deg) skewY(-10deg);
  31.   transform: skew(0deg, -10deg);
  32.   left: 24px;
  33. }
  34. .entry-thumbnail:after, .entry-thumb:after {
  35.   -webkit-transform: skew(0deg, 10deg);
  36.   -ms-transform: skewX(0deg) skewY(10deg);
  37.   transform: skew(0deg, 10deg);
  38.   right: 24px;
  39. }
  40. .entry-thumbnail {
  41. margin-bottom: 30px !Important;
  42. }

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.

Zuki-Theme Beitragsbilder mit Rahmen versehenZuki-Theme Beitragsbilder mit Rahmen versehen

Dir gefällt das? Schenke mir 1 Sekunde und unterstütze mich auf Patreon

Peter Wilhelm

Peter Wilhelm

Fachjournalist Peter Wilhelm schreibt hier über die Nebensächlichkeiten der Welt.
Er liebt Technik und testet Produkte, Service und Angebote.
Der Bestsellerautor ist Chefredakteur einer Branchenzeitschrift, Sachverständiger und Fernsehexperte.
Der Satiriker veröffentlicht seine Satiren hier und eine Kolumne hier.
Der Psychologe und Dozent wurde in der Halloweennacht geboren und lebt mit seiner Familie bei Heidelberg.
Mehr über ihn erfahren Sie u.a. hier und hier.


Alle Angaben nach bestem Wissen, keine Rechts- Steuer- oder Medizinberatung! Fragen Sie einen Fachmann!


peter wilhelm autorenlesung
-Anzeige-

Hinterlasse einen Kommentar

Du bist angemeldet als Peter Wilhelm | Jetzt abmelden?

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
Peter Wilhelm
wpDiscuz
Lesen Sie weiter:
Ab in die Verbannung!

Geehrter Kunde! Wir vertreten Ihrer Aufmerksamkeit das neue Verzeichnis der europaischen Internete-Ressourcen. Um Ihre Web-Seite...

Schließen