Showcase Style Guide

Showcase tries to use as little CSS as possible to make it as easy for you as possible to customise the look of your galleries.

Showcase uses a lightbox script called  Colorbox and so can be styled like a Colorbox theme. Note if you are making a custom lightbox theme, change the “Lightbox Theme” setting to “Custom” so that no conflicting CSS is applied.

Showcases uses a image slider script called  Flexslider so can be styled easily. In the plugin folder see scripts/flexslider/flexslider.css for en example on how to style the slider.

Below is an example of the output HTML and classes that can be used to style a Showcase gallery:

<div id="wp-showcase-{id}" class="wp-showcase enable-lightbox"> 
    <!-- Image Slider HTML --> 
    <div class="flexslider cf"> 
        <ul class="slides"> 
            <li> 
                <img src="http://example.com/image.jpg" alt="" /> 
        <p class="flex-caption"> ... </p> 
            </li> 
            ... 
        </ul> 
        <ol class="flex-control-nav"> 
            <li><a class="active">1</a></li> 
        ... 
        </ol> 
        <ul class="flex-direction-nav"> 
            <li><a class="prev" href="#">Previous</a></li> 
            <li><a class="next" href="#">Next</a></li> 
        </ul> 
    </div> 
     <!-- Gallery HTML --> 
    <ul class="wp-showcase-gallery layout-[default|full|full-data]"> 
        <li> 
            <a href="http://example.com/image.jpg" rel="wp-showcase-{id}" title="A caption..." class="cboxElement"> 
                <img src="http://example.com/image_thumb.jpg" alt="" /> 
            </a> 
            <div class="exif"> 
                <p class="date-taken"><span>Date Taken:</span> ...</p> 
                <p class="camera"><span>Camera:</span> ...</p> 
                <p class="focal-length"><span>Focal Length:</span> ...</p> 
                <p class="aperture"><span>Aperture:</span> ...</p> 
                <p class="iso"><span>ISO:</span> ...</p> 
                <p class="shutter-speed"><span>Shutter Speed:</span> ...</p> 
            </div> 
        </li> 
        ... 
    </ul> 
</div>