[Support request] How to make a Box Shadow?

[Marius]

Hello,
how can i make a shadow around the container? Also around the container under the content container.

[David]

Hi there,

try this CSS:

.separate-containers .inside-article,
.paging-navigation {
    box-shadow: 0 3px 15px 2px rgba(0,0,0,0.3);
}

And this site is handy for generating the box-shadow property:

https://cssgenerator.org/box-shadow-css-generator.html

[Marius]

Thanks David,

Can you tell me the shadow code from Marketer Site? I have tried to find that in the source code from the demo site, but can not find it.

[David]

This is the code Marketer uses:

.inside-article, .sidebar .widget, .comments-area {
    border-right: 2px solid rgba(0,0,0,.07);
    border-bottom: 2px solid rgba(0,0,0,.07);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

So if i got the correct selctors in my CSS then you would do:

.separate-containers .inside-article,
.paging-navigation,
.page-header {
    border-right: 2px solid rgba(0,0,0,.07);
    border-bottom: 2px solid rgba(0,0,0,.07);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

[Marius]

Perfect, thanks a lot!

[Marius]

Now I have see, that the category Heading is also in such a Box, but this has no shadow. Can we give this a shadow too?

[David]

I updated the CSS above to include the .page-header class

[Marius]

Perfect, thanks!

[David]

You’re welcome

[Philippe]

The site you gave for generating a box shadow is great. Though i couldn’t make it working on my website…
Is it on your plans to add a shadow box controler soon ? Could be really handy ! 🙂

I tried to add this to my containers Valeurs/Mission/Vision, but i see nothing Happening …

box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);
-webkit-box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);

https://libermouv.com/main/a-propos-de-nous/

[David]

Hi there,

add this CSS to your site:

.has-shadow {
    box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);
    -webkit-box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: -4px 10px 20px -6px rgba(0,0,0,0.75);
}

then edit the Grid, select the first column container, and i Advances > Additional CSS Class(es) add: has-shadow
Then do the same for each of the other columns.

[Philippe]

Wow ! It works great ! I didn’t catch i had to put in my child theme the CSS. Thanks so much David !!!

[David]

Glad to be of help

[Author]

Posts