Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Nivo slider - how to edit bullet navigation colour WordPress

Hi Guys

I'm having trouble working out how to change the style/colour of the black navigation bullets/dots on the Nivo slider on this site

The site is in maintenance mode at the moment so i cannot give you a live link

I want to change them from black to grey. Can I do this with css or do i need to create a disc and a circle image to replace the bullet and active slide circle

hope that makes sense :)

Many thanks

Answers (6)


Navjot Singh answers:

Bullets.png file needs to be changed.


juan manuel incaurgarat answers:

Hi Steve :)
On NivoSlider those bullets are made with images
So I suggest you edit the current CSS and use images with sprite technique.

Search for this line:
.nivo-controlNav a

and you see the image as bullets.png on the background property
that's what u need to change :)


Alfonso Abarca Alvarez answers:

hi steve!

nivo slider uses templates to customize their design, these come within the "nivo-slider/themes"

to customize the current theme you can edit the theme files in "nivo-slider/themes/default", in this template you can customize the default.css and bullets.png

the container of the bullets is:

<div class="nivo-controlNav">
<a rel="0" class="nivo-control">1</a>
<a rel="1" class="nivo-control">2</a>
<a rel="2" class="nivo-control">3</a>
<a rel="3" class="nivo-control active">4</a>
<a rel="4" class="nivo-control">5</a>
<a rel="5" class="nivo-control">6</a>


Arnav Joy answers:

which plugin you are using?

Steve Watson comments:

Nivo Slider


Abdelhadi Touil answers:

Are you using it as Wordpress plugin or the standalone version?


Espreson Media answers:

You can do this with css, but it will be better to change "bullets.png" file.
I've attached a changed "grey" bullets.png file.