DotNetNuke Tips for Skinning, CSS, and Design

I have found another great use for the DotNetNuke Announcements module and jQuery. Using it create a dynamic accordion. In case you missed it, this is the second time that I have gotten the DNN Announcements module and jQuery together. See my previous post on how to Turn DNN Announcements Module into a jQuery Slider.

This time, I needed to create a solution where I could have a jQuery accordion yet it could be easily updated by the client. So, I thought about the different core modules that were available and picked the Announcements module due to the ability to easily template it out. Now, if only the DNN Blog module were fully template driven (*hint *hint). This module has spots to place a header, repeatable item, alternating repeatable item, separator, and footer. We will be using only the header, item, and footer.

DotNetNuke has come a long way recently with making things much more w3 compliant. This has allowed for more than just cleaner code; it has also allowed for much more control of your website through jQuery and CSS. Also, according to the forums, it looks like things are getting even better for compliance and control.

One of my favorite updates of DNN modules to this new compliance, is the DNN Announcements module. With the latest release, we now have the ability to set up the announcements as a list and apply some cool jQuery to it. When I started looking into what I wanted my slider to be, I decided that I wanted to have my main image fade in and out and the title and description to slide in from the bottom. I came across the s3Slider jQuery plugin which seemed to provide exactly what I was looking for.

I have outlined the steps below on how to add it to your site. I did not go into much detail on how things are set up...