How To Customize Dynamic Drive’s Featured Content Slider

Aug.30.08

Yesterday I added Dynamic Drive’s Featured Content Slider v2.4 to one of our sites. This script was very easy to install and customize so I decided to share with you how I did it. Basically I made it transparent with PNG images.

Fist off you need to head over to Dynamic Drive and download the files that you need Featured Content Slider v2.4.

Seconded you need to ether make your own transparent PNG images or you can go here and use the images I used for this project.

See a live demo

Now lets quick look at the stock CSS code.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

To add a transparent border around the content slider you can do this. Note: I made the featured content slider smaller for this project.

Remove this:
border: 10px solid navy;

Add this:
background: url(/images/transpBlue10.png) repeat;
padding:2px

So the code should look like this:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
background: url(/images/transpBlue10.png) repeat;
border-bottom-width: 6px;
width: 335px; /*width of featured content slider*/
height: 200px;
padding:2px
}

Next step is to edit the content area.

You will need to add this:
border: 1px solid #DDD;
margin: 4px 0 0 5px;
padding: 2px;

So the code will look like this:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
margin: 4px 0 0 5px;
padding: 2px;
background: #FFF;
border: 1px solid #DDD;
width: 322px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Now we will edit the look of the pagination DIV.

Remove this:
background-color: navy;
width: 400px;

Add this:
width: 419px;
background: url(/images/transpBlue10.png) repeat;

So the code will look like this:

.pagination{
width: 319px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background: url(/images/transpBlue10.png) repeat;
padding: 5px 10px;
}

Almost done! The last step is adding a effect to the pagination links.

Remove this:
color: #00007D;
background: white;

Add this:
color: #FFF;
background: url(/images/transpBlue25.png) repeat;

So the code will look like this:

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #FFF;
background: url(/images/transpBlue25.png) repeat;
}

Finish it off with a hover effect.

Remove this:
color: #000;
background-color: #FEE496;

Add this:
color: #EEE;
background: url(/images/transpBlue75.png) repeat;

So the code will look like this:

.pagination a:hover, .pagination a.selected{
color: #EEE;
background: url(/images/transpBlue75.png) repeat;
}

Here is the CSS file:
contentslider.css

Here are the PNGs from this project.

Tags: Dhtml, Scripts
Filed under: Featured  | Comments 8