Need help? Check out our Support site, then


SLIDESHOW: How to Style Captions with CSS

  1. In the past, a number of forum members have asked how to style image captions in a slideshow. I've found a solution to this problem and want to share it with the WordPress community.

    The slideshow plugin uses this style sheet, which lists all of the slideshow elements that can be customized using CSS. You can override the default style by entering your own CSS code on the Custom Design page of your site.

    For example, this CSS code enlarges the caption, moves the caption above the image, and lowers the slideshow controls (which appear only when the mouse hovers over the slideshow):

    .slideshow-slide-caption {
    font-size:30px;
    top:0;
    }
    .slideshow-controls {
    bottom:0;
    }

    I will post an example of this on a site I'm building for a client when the site is further along. You can use the same technique to change other features, like font and background colors.

  2. I *love* that you shared this!

    For an easier to read version of the slideshow.css you mentioned, add ?minify=false to the end of the URL like this:
    http://s1.wp.com/wp-content/mu-plugins/slideshow/slideshow.css?minify=false

    I've you've adjusted the font size for body text on the Appearance → Custom Design → Fonts page, then you should add !important to the font-size rule in your example to override the font setting just in the slideshow captions:

    font-size:30px !important;

    I tested the code. Looks great!

  3. @designsimply, thanks for the sweet ?minify=false tip!

    Thanks also for the !important tip concerning font size. I haven't customized my fonts, but your tip is definitely good to know in case I do.

    Nice to meet you,

    Fred Chapman
    Bethlehem, PA

Topic Closed

This topic has been closed to new replies.

About this Topic