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:
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 */
}
Comments
Be the first to write a comment
You must me logged in to write a comment.