Problems applying css drop shadows to WordPress (twentyeleven) widgets.

[Saggi]

Hi,

As the title says, I´m trying to apply these drop-shadows effect I found at Nicholas Gallagher´s website( http://nicolasgallagher.com/css-drop-shadows-without-images/ )to every widget box on my “Powered by wordpress & Twenty Eleven” blog but I am not able to find the correct position for the shadows, I´m trying to do it by editing the “.widget” (also adding .widget:before and .widget:after ) section right under

/* =Widgets

*/

on the theme´s style.css

Any clues about accomplishing this task?

Thanks for your help.

[chrisburton]

Copied directly from his website: http://jsfiddle.net/95dhU/

[Saggi]

I truly appreciate your reply thank you but did you tried your suggestion on a wordpress blog?

I added the drop-shadow class to widgets through functions.php and now z-index seems to be the problematic part because when it´s set as -1 I can´t see no changes at all, and when I set to higher values I´ll see the shadows overlapping the widget box.

Any suggestions?

Regards,

Saggi.

[chrisburton]

set .widgets to z-index:2 and .drop-shadow to z-index: 1

[Saggi]

Thanks but still not working as shadows are still overlapping the widget, I have everything set up like this:

Widget content.

So I thought that it was because the aside tag contained both classes .widget and .drop-shadow so I also tried reformatting it to:

Widget content.

But the results were the same.

Regards,
Saggi.

[chrisburton]

Make sure it’s applied so I can debug. Link?

[Saggi]

Sure, website is still in progress so it won´t affect anybody.
test blog
Thank you for your help.

Regards,
Saggi.

[chrisburton]

Hmm..I would say something else is the cause.

[Author]

Posts