Nivo slider displaying numbers instead of background image

Question

I am running intro a pretty strange situation. I've added a nivo slider on a site but when I turn controlnav on the slide navigator is composed of numbers. The thing is I'd like to use bullets instead of those numbers. I've tried to add text-indent:-9999px but that doesn't work. I've used Nivo before plenty of times, this is the first time it's happening. The script is new and as far as I can see there is no scripting or css issue that might be causing it

Site is here: http://minimaltheme01.brideappeal.com/

Any idea why this might be happening? Thanks!

Answer 1

By default nivo slider displays the numbers. To get them to be restyled and show bullets instead of the numbers you can use a theme or you could optionally write your own css to style them.

Check the documentation to see how to include a theme.

You will need to alter to html a little.

Check out these 2 js fiddles for (rough) examples of with and without the theme.

http://jsfiddle.net/cyZH2/ - without

http://jsfiddle.net/8Tafp/ - with

In the default-theme css file, it includes the following styles that display the links as bullets.

.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    text-align: center;
    padding: 20px 0;
}
.theme-default .nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}