How to fix the height of the nivo slider – default theme

How to fix the height of the nivo slider when using the default theme for oik-nivo-slider. The default theme used by the oik-nivo-slider plugin uses Version 3.2 of the jQuery Nivo slider code. This is a responsive slider that adjusts depending on the size of the image. If you want to set a fixed height to the slider then you will need to write some CSS. This example demonstrates a method using custom CSS to override the CSS for the default theme.

Example

Stansted-beeches-facing-West-Orman theme 568×268

Here we see a slider displaying two images of different sizes. The slider height is set to a maximum of 268 pixels (class mh268), the width a maximum of 568 pixels (class mw568). The slider will take up a maximum of 70% of the width, allowing for 3% padding on the right; see oik-rwd.

Shortcode



[nivo id=10983,10987 class="w70p3 mw568 mh268"]

Custom CSS

Set maximum height and width



.mw568 { max-width: 568px; }

.mh268 { max-height: 268px; }

Set the initial height for the default theme



.theme-default { padding-top: 38.1831%; height: 0; position:relative; margin-bottom: 25px;  }

div .theme-default .nivoSlider { position: absolute; top: 0; bottom: 0; }

div .theme-default .nivo-controlNav { padding: 0px !important; }

See also

oik-css to define, and display, the custom CSS required.
oik-rwd to generate dynamic CSS classes for Responsive Web Design

Published: July 29, 2014 | Last updated: July 29, 2014

Syntax

[nivo
post_type="attachment| post_type - Post type to display"
theme="default| bar| custom| dark| light| orman| pascal| oik271| default271 - Theme for the slideshow"
class="| classes - CSS classes"
link="y| n| file| full - Link the images to the target post/page or media file"
caption="y| n - Display the image title as the caption"
format="| format - field format string"
ribbon="y| n - Display the ribbon, if the theme supports it"
thumbnail="full| thumbnail| medium| large| nnn| wxh - image size"
thumbs="| n| y - Thumbnail navigation"
nav="| n| y - Control navigation"
pause="| pause - Pause time in milli seconds"
manual="| n| y - Manual advance"
effect="| random| sliceDownRight| sliceDownLeft| sliceUpRight| sliceUpLeft| sliceUpDown| sliceUpDownLeft | fold| fade| boxRandom| boxRain| boxRainReverse| boxRainGrow| boxRainGrowReverse| slideInLeft| slideInRight - transition effect"
numberposts="5| numeric - number to return"
offset="0| numeric - offset from which to start"
category="| category ID - numeric ID of the post category"
category_name="| category-slug - category slugs (comma separated)"
customcategoryname="| category-slug - custom category slug"
orderby="date| ID| title| parent| rand| menu_order - Sort sequence"
order="DESC| ASC - Sort order."
include="| id1,id2 - IDs to include"
exclude="| id1,id2 - IDs to exclude"
meta_key="| meta key - post metadata key"
meta_value="| meta value - post metadata value"
post_mime_type="| image| application| text| video| mime type - Attached media MIME type"
post_parent="| ID - Parent ID to use if not current post"
post_status="| publish| inherit| pending| draft| auto-draft| future| private| trash| any - Post status"
id="| id1,id2 - IDs of posts to display"
posts_per_page="| numeric| . - Number of posts per page. Use '.' for current value 15"]