Styling Blip Slideshow

Blip is styled through CSS. Certain assumptions are made by the default slideshow.css file, such as thumbnails being 40 pixels high, or slideshow images being 400×300 pixels that you will almost certainly have to override for your own use.

If you use the WordPress post editor in HTML mode (not Visual mode) in-line styling can be used right in your post or page, for example here is CSS to make room for 75px square thumbnails under the slideshow, overriding what is hardcoded in slideshow.css:

<style>div.slideshow {margin-bottom:95px} div.slideshow-thumbnails {height:95px;bottom:-95px}</style>

However, the best place to put CSS in a file called blip-slideshow.css in your active WordPress theme’s directory. If Blip detects that this stylesheet exists, it will be automatically loaded. This is preferable to modifying the source code for the plugin, as new versions of the plugin will overwrite your changes. For example, here is code that could live in the stylesheet to keep the controller visible all the time:

.slideshow-controller-hidden { opacity: 1; }

To target a particular slideshow in your stylesheet, use the id option in the slideshow shortcode, for example:

[blip-slideshow id="myShow"]
<style>div#myShow {background-color:black}</style>

Have a look at the HTML structure that Blip creates to see what CSS class names are used.

Continue to the Blip Slideshow Reference page to see all the configuration options available to tailor Blip to your needs.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>