How to Change Slider UI Color
Do you want to change the color of your slider’s UI elements? Soliloquy comes with a lot of customization features, among the ability to change your slider UI theme and tweak the colors. All you need to do is change some CSS and your slider can be any color under the rainbow! Just follow these steps to get started.
- Install the CSS Addon
- Navigation Bullets
- Slider Arrows
- Pause/Play Button
- Caption Background Color
Install the CSS Addon
To get started tweaking the CSS of Soliloquy sliders, you’ll need to download the CSS addon. This allows you to tweak CSS on a slider-by-slider basis — otherwise, your only option is to type CSS into the WordPress customizer, which will affect the appearance of every slider.
To add custom CSS, go to a slider’s settings page, click Misc, then paste the code into Custom Slider CSS.
When using custom CSS, you’ll need to replace the default container ID with your slider’s ID. You can find the ID by going to a slider’s settings page and checking the sidebar. Here’s a guide on finding your sliders’ IDs.
Finally, changing colors requires using hex codes, a numerical representation of specific colors. Use a site like Color Hex to find the code of the colors you want to use.
Navigation Bullets
Slider navigation bullets are small circles that appear at the bottom of a slider, allowing people to progress through the slides in any order. To turn them on, enable Show Slider Control Nav? In your slider settings.
Like every other UI element, the color of these can be easily changed with this code.
#soliloquy-container-000 .soliloquy-pager-item {
border: 2px solid #000000 !important;
border-radius: 999em !important;
}
#soliloquy-container-000 .soliloquy-pager-link:hover, .soliloquy-container .soliloquy-pager-link.active {
background-color: #000000 !important;
}
Make sure to change the hex color code to the color you want and replace the container ID. The first set will change the color of the bullets’ border while the last will change the color that fills the bullets on hover.
Slider Arrows
Adding arrows to your slider enables you to manually click through slides rather than waiting for them to transition automatically. You can turn them on by ticking the Show Slider Arrows? setting on your slider.
To change the color, just add this code.
#soliloquy-container-000 .soliloquy-prev,
#soliloquy-container-000 .soliloquy-next {
background-color: #000000 !important;
}
Now just change the hex code to what you want!
Pause/Play Button
A pause/play button gives users control over slider navigation by allowing them to start and stop the slideshow feature at will. You can find its setting named Show Pause/Play Controls? if you want to turn it on.
As always, changing the color is as easy as tweaking hex codes.
#soliloquy-container-000 .soliloquy-controls-auto .soliloquy-controls-auto-item a.soliloquy-start {
background-color: #000000 !important;
}
#soliloquy-container-000 .soliloquy-controls-auto .soliloquy-controls-auto-item a.soliloquy-stop {
background-color :#000000 !important;
}
The first changes the play button while the latter edits the pause button.
Caption Background Color
By default, the caption background color is a simple, semi-transparent black. You can easily change the color of the caption’s background by using this code.
#soliloquy-container-000 .soliloquy-caption .soliloquy-caption-inside {
background-color: #000000 !important;
}
Just replace the hex code with the color you want, and the Soliloquy container ID with your slider’s actual ID.
You could also make the caption background transparent.
#soliloquy-container-000 .soliloquy-caption-inside {
background: transparent !important;
filter: none !important;
-ms-filter: none !important;
}
Change Soliloquy Slider Colors
Customization should be an important aspect of any slider plugin, and Soliloquy is glad to deliver. Make your sliders your own by customizing the colors to fit your brand or simply your preference. While you’re here, check out some of Soliloquy’s customization options to further edit your slider.
If you liked this tutorial, please follow us on Facebook and Twitter for more.
Related Posts
