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

Enterprise eCommerce

Don’t get stuck with a platform that limits your range, Sell everywhere all the time with Clarity eCommerce.

image description