Back to Top
The nuts and bolts for
Creative web development

Can I style my DMXzone Nivo Slider?

“Edit your DMXzone Nivo Slider through the CSS”

Is there a way to style the DMXzone Nivo Slider's bullets, arrows, caption and thumbnails?


Yes, you can do that by editing the CSS.

 

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

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 5 years now, contributing to both Marketing and Content departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Share this Article