Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Change the Slider Navigation Bullets Color

By default the slider navigation bullets are white, but you can easily change the color of the navigation bullets using CSS.

Add the following code to your active theme’s style.css file and update the color values as desired:

.soliloquy-container .soliloquy-pager-item {
    border: 2px solid #000 !important;
    border-radius: 999em !important;
}
.soliloquy-container .soliloquy-pager-link {
    background-image: none !important;
    width: 10px !important;
    height: 10px !important;
}
.soliloquy-container .soliloquy-pager-link:hover, .soliloquy-container .soliloquy-pager-link.active {
    background-image: none !important;
    background-color: #000 !important;
}

Save the changes and view your sliders to see the change!

[i]
[i]