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.

4 thoughts on “Styling Blip Slideshow

  1. Eric

    Great plugin. Love it. However, I’m having trouble with the slideshow hiding a dropdown menu that expands behind it. I’m currently using the plugin in a widget with the plugin Shortcodes in Sidebar Widgets. The site is http://www.sanerfamily.com. The drop down menu starts at How To.

    Do you have any advice on how to fix this?

    Thanks for your help.
    -Eric

    Reply
  2. Corin Stephenson

    So what would be the css code in order to allow my vertical images to not be cut off, as well as to just make the entire slideshow larger, so larger images. For example, i have vertical images that are 853 × 1280 pixels that are currently being cut off, and horizontal images that are 1280 × 853 pixels and I want the whole viewer to not be quite as small as the default slideshow. It would be nice if it could fill, for the horizontal pictures, the entire width of a standard wordpress post, and then the corresponding needed dimensions for the vertical. Both larger than the default. Also, what height/width to you suggest I use for the slideshow code, right now I do not have height or width in there yet: [blip-slideshow thumbnails=false rss=feed://feed410.photobucket.com/albums/pp181/CorinAmber/CreatingourFirstGarden/feed.rss].

    Thanks! :-)

    http://corinstephenson.com/organic-biodynamic-permaculture/2011/10/17/creating-our-first-garden/

    Reply
  3. Pingback: wordpress plugin review and discussion. | Loadwp.com

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>