Styling the DMXzone Nivo Slider

Style your thumbnails, captions, bullets and arrows through the CSS

If you want to style your DMXzone Nivo Slider's thumbnails, captions, bullets and arrows by color and size, you can do that through the CSS and here you can see how to do that.

Overview

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 */
}

Teodor Kuduschiev

Teodor KuduschievAs a part of the DMXzone and Wappler team, Teodor has a passion for creative web development, using the latest technologies. He's taking care of showcases, tutorials and support for our community.

See All Postings From Teodor Kuduschiev >>

Reviews

Be the first to write a review

You must me logged in to write a review.