Styling Descriptions for Ultimate Fade-in slideshow (v2.1)
by
, 05-18-2010 at 10:33 AM (30861 Views)
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:
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.Code:.descpanelbg { background-color: red!important; } .descpanelfg { font-family: 'comic sans ms', sans-serif; color: black!important; }
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:
Code:#fadeshow1
.descpanelfg { font-family: 'comic sans ms', sans-serif; color: black!important; }