Skip to Content

CSS3 Drop Shadows in DNN7 with Bootstrap


dnn7 drop shadows bootstrap

There I was, ready to apply some fun CSS3-ness in a DNN7 project with a fancy Bootstrap-based responsive skin, when BAM...nothing.

I checked my drop shadow code: set my container to position:relative...Check. Added my :before and :after psuedo-classes, taking advantage of the mighty useful skew transform property (great article on the whole process here)...Check. But still, no reaction from my element on screen.

Then I noticed, once going into Edit view mode, that the CSS3 drop shadow was indeed working, though only when I wasn't moused over the containing div.



Something was afoot. And I figured, based on the behavior I was seeing, that the DNN out-of-the-box stylesheets must be conflicting with our Bootstrap-based responsive skin (we happen to be using this one).

So I took to browser web developer tools to start experimenting with DNN stylesheets associated with administrator roles, since that is where I was seeing the behavior I wanted to show on screen. After some digging, I found the culprit, and it was hiding in Root Folder/Portals/_default/admin.css.



Lurking there in admin.css was a z-index declaration that was commented out. I activated that declaration by removing the comment indicators around it. But that change would only be visible by site admins, so I tried adding the same style declaration to my user-facing stylesheet...and voilà.



If you're working with a Bootstrap-based skin in DNN7 and seeing the same problem, here's the quick fix list to get your styles working how you expect them to:

  • 1. Open the admin.css stylesheet located at Root Folder/Portals/_default/admin.css
  • 2. Find the .DnnModule selector and uncomment the z-index:902 declaration
  • 3. Then, add the .DnnModule {z-index:902;} style declaration to you user-facing stylesheet (since only admins will see the results of the admin.css stylesheet)
  • 4. Sit back and enjoy the image-less depth effects provided by the wonderfully useful CSS3 drop shadows
icon description

Find out more

Click here to review options to gather more info. From resource guides to complimentary expert review... we're here to help!

Back to top
Request a Quote
 
Please feel free to send any associated files to us at:
[email protected]
 
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Request a Demo
 
Please feel free to send any associated files to us at:
[email protected]
 
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Ask an Expert
 
Please feel free to send any associated files to us at:
[email protected]
 
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Newsletter
 
Please feel free to send any associated files to us at:
[email protected]
 
Privacy Statement | Terms of Use
Click anywhere outside this form to close.