Hei guys,

My css knowledge is unfortunately at a diaper level, however, I still hope I can manage this one:

I want to apply shadow effect 2 to a box ( http://www.paulund.co.uk/creating-different-css3-box-shadows-effects )

I am building a site with a WordPress theme called “Enfold”, which has a built-in Avia Layout Builder.

This builder allows me to add custom css class to different objects in page (including the box I want to apply shaddow to), and define the css properties for this object in the “quick css” field.

I called the custom class of the box in question as “my-box”, and pasted in the generated code of effect2 into the quick css field. However, it gives no effect.

What am I doing wrong ? Any tips are highly appreciated..

custom css class: my-box

quick css:
#top .my-box .effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: “”;
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

Thanks a lot!