Styling the DMXzone Nivo Slider

Styling the Prev/Next Arrows

The Prev and Next arrows are images and they are different for each design style. They are located in:

\Styles\nivoSlider\<The design name>\

The directional arrows styling is located in the css file of the current style:

\Styles\nivoSlider\<The design name>\<The design name>.css

The .nivo-directionNav is common for both Arrows, changing the properties in it affects both of them:

.nivo-directionNav a {
    background: url("arrows.png") no-repeat scroll 0 0 transparent;  /* Background for the Navigation Arrows. Change this image if you want to use diferent arrows */
    height: 32px; /* Width of the Navigation Arrows */
    width: 32px; /* Height of the Navigation Arrows */
}

You can specify different properties for the Next Arrow and for the Right Arrow using:

a.nivo-nextNav {
    background-position: -32px 0; /* Background position for the Next Arrow */
    right: 10px; /* Position of the Next Arrow */
}
a.nivo-prevNav {
    left: 10px; /* Position of the Left Arrow */
}

Styling the Bullets

The Bullets are images and they are different for each design style. They are located in:

\Styles\nivoSlider\<The design name>\

The Bullets styling is located in the css file of the current style:

\Styles\nivoSlider\<The design name>\<The design name>.css

The .nivo-controlNav class is used to specify the position of the Bullets:

.nivo-controlNav {
    bottom: -30px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.nivo-controlNav a {
    background: url("bullets.png") no-repeat scroll 0 0 transparent; /* Background for the bullets. Change this image if you want to use diferent bullets */
    border: 0 none;
    color: transparent;
    display: inline-block;
    font-size: 0;
    height: 10px; /* Height of the Bullets */
    margin-right: 3px; /* Margin between the Bullets */
    width: 10px; /* Width of the Bullets */
}
.nivo-controlNav a.active {
    background-position: -10px 0; /* Selected Bullet background image */
}

Styling the Thumbnails

The Thumbnails styling is located in the css file of the current style:

\Styles\nivoSlider\<The design name_with_thumbs>\<The design name>_with_thumbs.css

.nivo-controlNav {
    position:absolute;
    bottom:-70px; /* Moves the nnavigation thumbnails below the slider. Change this if you want to move the thumbnails. */
    text-align:center;
    width:100%;
}

.nivo-controlNav img {
    display: inline;
    margin-right: 10px; /* Margin between the Thumbnails */
    position: relative;
}
.nivo-controlNav a img { /* This is the initial state */
    border: 1px solid transparent; /* Border of the Thumbnails */
    box-shadow: 0 0 3px #333333; /* Shadow of the Thumbnails */
}
.nivo-controlNav a.active img { /* This is the Selected state */
    border: 1px solid #FF0000; /* Border of the Selected Thumbnail */
}
.nivo-controlNav a:hover img { /* This is the Hover state */
    border: 1px solid #000000; /* Border of the hHovered Thumbnail */
}

Using bigger thumbnails:

.nivo-controlNav {
 bottom: -70px; /* -(thumb size + 20) */
}

.nivoSlider {
  margin-bottom: 70px; /* thumb size * rows + 20 */
}
 

Styling the Caption

The caption styling is located in the nivo-slider.css:

\Styles\nivo-slider.css

Where you can change:

.nivo-caption {
    background: none repeat scroll 0 0 #000000; /* The background color of the Caption */
    bottom: 0; /* Vertical position of the Caption */
    left: 0; /* Horizontal position of the Caption */
    position: absolute;
    width: 100%; /* The width of the Caption */
}

And in the css file of the current style:

\Styles\nivoSlider\<The design name>\<The design name>.css

Here you can change the Title and Description styles:

.nivo-caption p h4 {
    color: #FFFFFF; /* The Title color */
    margin: 5px; /* The Title margin */
    padding: 0; /* The Title padding */
}
.nivo-caption p p {
    color: #CCCCCC; /* The Description color */
    margin: 5px; /* The Description margin */
    padding: 0; /* The Description padding */
}