
-
AuthorPosts
-
October 24, 2020 at 2:36 pm #1255419
Hallo,
wie lässt sich per CSS Code im Produktraster ein Schatten hinter der Artikelabbildung erzeugen?
(Shop Seite mit Avia > Plugin Ergänzungen > Produktraster > Benutzerdefinierte CSS-Klasse)folgender Code dort eingetragen funktioniert nicht:
{box-shadow: 10px 10px 50px #B4B4B4;}Enfold Einstellungen sind unter “Shop”:
Produktlayout auf Übersichtseiten = minimal ohne Rahmen
Produkt Galerie = Standard Enfold Galerietransl.:
Hello,
How can a shadow behind the article image be created in the product grid using CSS code?
(Shop page with Avia> Plugin additions> Product grid> Custom CSS class)the following code entered there does not work:
{box-shadow: 10px 10px 50px # B4B4B4;}Enfold settings are under “Shop”:
Product layout on overview pages = minimally without frame
Product gallery = standard enfold galleryOctober 24, 2020 at 2:53 pm #1255420liegt meist daran, dass man vergisst den übergeordneten Containern ein overflow: visible zu geben.
Mit einer Linkseite wäre ein besserer Tip in Form von css code möglichOctober 24, 2020 at 3:06 pm #1255421Hallo Guenni007,
Danke für die schnelle Meldung. Den Code habe ich mir zusammengelesen, da ich selbst null Ahnung davon habe. Was bedeutet denn overflow: visible und übergeordneter Container? (Container = in Avia die Ebene über dem Produkt-Raster? = hier bei mir ein Farbsektion Feld)PS: Link ist z.Zt. nicht möglich, da noch im Wartungsmodus / bzw. nicht veröffentlicht.
October 25, 2020 at 7:22 am #1255469mir würde schon reichen, wenn du eine analoge Seite in den Demos verlinken könntest.
z.B. sowas hier: https://kriesi.at/themes/enfold-shop/shop/
da dort viele der drüberliegenden Container mit overflow: hidden gesetzt sind müsste man das aufheben um den ja aussenliegenden Schatten zu sehen.div .products .product a, .product .inner_product, .product .thumbnail_container, div .products .product a img { overflow: visible; } .woocommerce-LoopProduct-link:hover .attachment-shop_catalog { box-shadow: 2px 2px 8px #888; }
oder man gibt dem entsprechenden Container der den Schatten hat soviel margin, dass der Schatten wieder innerhalb desselben liegt:.woocommerce-LoopProduct-link .thumbnail_container { margin: 10px !important; } .woocommerce-LoopProduct-link:hover .thumbnail_container { box-shadow: 2px 2px 8px #333; transition: all 0.3s ease; }
October 25, 2020 at 11:42 am #1255480Hallo,
Daumen hoch und vielen Dank für die Hilfe.
Der Code aus der ersten Abbildung bringt´s. Habe diesen in Enfold>Allg.Styling>Quick CSS eingesetzt, und es passt.October 25, 2020 at 11:56 pm #1255560Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.