Bullets instead of image numbers for slideshow gallery

Want to replace image numbers with bullets in slideshow gallery like in this picture?

This works for all Berta templates.
Go to Template design / Custom CSS and paste this code in "Custom CSS" field:

#pageEntries .xEntry .xGalleryContainer ul.xGalleryNav a {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #ccc;
padding: 0;
margin: 5px 5px 0 0;
}
#pageEntries .xEntry .xGalleryContainer ul.xGalleryNav li.selected a {
background-color: #000;
}
#pageEntries .xEntry .xGalleryContainer ul.xGalleryNav a span {
display: none;
}

With the help of this color picker tool http://www.colorpicker.com you can get the color code you want and change the bullet color code #ccc and active bullet color code #000

You can also change the size and radius by increasing or decreasing defined values.