PDA

View Full Version : Styling Description Text for Ultimate Fade-in slideshow (v2.1)



Stueadie
05-18-2010, 08:21 AM
1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I would like to style the fonts in the description with css.
I've tried a few things that don't work. Can it be done? Many Thanks STU

jscheuer1
05-18-2010, 10:16 AM
There are actually 4 css selectors that can figure in this. Only three of them really matter. If you only have one show on your page, you only need to think about the last two. The selectors are:


The id of the show, #fadeshow1, for example.


.fadeslidedescdiv - the class for all description containers.


.descpanelbg - the class for all description backgrounds.


.descpanelfg - the class for all description foregrounds.


Though it can be used for some things, you can safely ignore .fadeslidedescdiv in almost all cases. The background panel controls the background color and opacity of the background color for the descriptions. Any background color or opacity you want to enforce here must use the !important keyword in order to override the script's internal styles for these. The foreground panel may be used to style the color and font of the description. It's font styles need no override, but it's color styles do.

So, for example, if you wanted to change the background to red, the color to black and the font to Comic Sans MS:


.descpanelbg {
background-color: red!important;
}
.descpanelfg {
font-family: 'comic sans ms', sans-serif;
color: black!important;
}

You can change the font-size, line-height, pretty much anything you want. And the above method of using the selectors will work fine as long as you either have only one slide show on the page, or wish to style the descriptions in all slide shows on the page in the same manner.

In cases where there are more than one show on the page and you want your customization to apply to only one show, use its wrapper id as a prefix, ex:


#fadeshow1 .descpanelfg {
font-family: 'comic sans ms', sans-serif;
color: black!important;
}

Stueadie
05-18-2010, 11:02 AM
Thanks so much. Worked a treat.