DotNetNuke Tips for Skinning, CSS, and Design

Written by: Ralph Williams
Thursday, June 03, 2010 10:34 PM 

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. For more detail on the slider, check out the s3Slider link above.

Demo

The HTML

1. Add the Announcements module to your page.
2. Click the "Settings" link.
3. Expand the "Announcements Settings"
4. In the "Header Template:" text area, enter the following code:

5. In the "Item Template:" text area, enter the following code:
   If you want your description area to be at the top of the image area, use the class top in the span.
   If you want your description area to be at the bottom of the image area, use the class bottom in the span as I have here.

         
   
             [IMAGESOURCE][TITLE][EDIT]
   
             [DESCRIPTION]
   
             [READMORE]
         

6. In the "Footer Template:" text area, enter the following code:

7. Also close out the ul and div in the "Footer Template:" area. (I couldn't put the code in, for some reason it kept breaking the layout and losing the code.)

The CSS

In your skin.css file, insert the following styles: (note the widths and heights in the CSS. They need to be exactly the same as the image for the announcemnts.)

#s3slider { width: 500px; height: 242px; position: relative; overflow: hidden;}
#s3sliderContent { width: 500px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage { float: left; position: relative; display: none;}
.s3sliderImage span { position: absolute; font: 14px/21px Arial, Helvetica, sans-serif; padding: 10px 13px;  width: 500px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}

The jQuery

Now that we have all of that in place, we can add the jQuery to make it work.

1. Download the files from the s3Slider site. http://www.serie3.info/s3slider (link opens in new window)
2. Upload the s3Slider.js file to your skin folder.
3. In your skin file (for example: skin.ascx), enter the following code: (you can put this at the top or the bottom of your skin)

The Content

Now just start adding your announcements! Be sure to make your images the same size as what is set in the CSS.

Please feel free to leave questions or comments.

Trackback Print

Tags: slider , jQuery , CSS , skinning , announcements

Categories: Skinning, jQuery

Location: Blogs RalphWilliams.com

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel