Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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 Galerie

    transl.:
    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 gallery

    #1255420

    liegt 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öglich

    #1255421

    Hallo 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.

    #1255469

    mir 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;
    }
    #1255480

    Hallo,
    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.

    #1255560

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.