Hi,
All styles such as font size and font colors can be adapted through a slideshow’s custom stylesheet. A basic understanding of CSS would come in handy here.
To create a custom stylesheet, go to “Slideshows” in your WordPress dashboard menu. In the “Slideshows” menu, you’ll find a submenu called “General Settings”. Click on this submenu. A page with a couple of tabs will open. One of these tabs is the “Custom Styles” tab, click on it to start customizing a stylesheet.
On the “Custom Styles” tab you’ll see the “Default stylesheets”. These are the stylesheets that will always be available to start your customization from. Click “Customize” to edit a new custom stylesheet.
If you would like to change the font, font size, and font color of your description boxes, you should do the following.
Look for the “.slideshow_description” lines in the stylesheet:
.slideshow_container .slideshow_description { background: #000; width: 100%; }
.slideshow_container .slideshow_description h2 { font-size: 1.3em; text-align: center; }
.slideshow_container .slideshow_description p { text-align: center; }
.slideshow_container .slideshow_description h2 a,
.slideshow_container .slideshow_description p a { color: #fff; }
To change the font of the description boxes to “Times New Roman” (or any other font available on your website), add “font-family: "Times New Roman";” to the following line in the stylesheet:
.slideshow_container .slideshow_description h2 a,
.slideshow_container .slideshow_description p a { font-family: "Times new Roman"; color: #fff; }
If you wanted to change the font size of the title and description in the description boxes, set “font-size” to a bigger value:
.slideshow_container .slideshow_description h2 { font-size: 2.0em; text-align: center; }
.slideshow_container .slideshow_description p { font-size: 1.5em; text-align: center; }
To set the font color of the description to another color, red for instance, change the “color” to the red color hexadecimal:
.slideshow_container .slideshow_description h2 a,
.slideshow_container .slideshow_description p a { font-family: "Times New Roman"; color: #ff0000; }
The same goes for setting the background color of the description boxes. Look for the “background” attribute and set it to a different color, white for instance:
.slideshow_container .slideshow_description { background: #ffffff; width: 100%; }
The resulting block of CSS code would look something like this:
.slideshow_container .slideshow_description { background: #ffffff; width: 100%; }
.slideshow_container .slideshow_description h2 { font-size: 2.0em; text-align: center; }
.slideshow_container .slideshow_description p { font-size: 1.5em; text-align: center; }
.slideshow_container .slideshow_description h2 a,
.slideshow_container .slideshow_description p a { font-family: "Times New Roman"; color: #ff0000; }
Best regards,
Stefan
