WordPress plugins and themes

nivo slider is wider than my images

A blank space to the right of each image indicates that the nivo slider is wider than your images. The space on the right is because the nivo slider part of the code sets its width to the size of the containing div but your images are smaller. You can control this by using CSS classes on the slider-wrapper or theme-default selector.


[nivo theme=default271]


[nivo class=mw200 theme=default271]

Use custom CSS ( {} ) to set the max-width of the slider. Here we do it by setting a class on the slider to mw200 which is defined as

div.mw200 div.slider-wrapper { max-width: 200px; overflow: hidden; }
.theme-default271 .nivoSlider a.iframe:first-child img  { margin-bottom: 40px; }
.theme-default271 .nivoSlider a.iframe:nth-child(n+2) img  { border-top: 3px solid red; display:none; }

You can also set the max-width for all instances of the slider div.slider-wrapper { max-width: 618px; } or set it on a specific page div#post-53 div.slider-wrapper { max-width: 618px; }

Note: These notes are applicable Nivo version 2.7.1, not nivo version 3.2. You need to choose a non-responsive theme, e.g. default271, for this method to work. If you are using a responsive Nivo theme (e.g. the default theme) then this logic does not apply.

Leave a Reply

Recent plugin updates
bbboing v1.8 v1.8 has a minor change to test integration with the shortcake UI plugin. ...
oik v2.5-alpha.0130 oik v2.5-alpha.0130 is the first drop for oik v2.5.
This first version is primarily focussed on delivery of some prototype code to support the shortcake UI plugin.
oik-batchmove v2.4 Now supports mass setting of post meta data. ...
oik-squeeze v0.7 v0.7 of the oik-squeeze WordPress plugin no longer displays the squeeze page form on the WPMS sign-up page. ...
oik-external-link-warning v0.05 v0.05 of the oik-external-link-warning plugin now supports display of tooltips over links which do not contain the title attribute. ...