How to Add Custom CSS to Your WordPress Image Slider
Do you want to customize the look and feel of your image sliders? Sometimes you may want to add custom CSS to style your image sliders. In this article, we will share how to add custom CSS to your WordPress image slider.
Many WordPress image sliders don’t support custom styling, so you’ll need to edit your theme’s HTML and stylesheet to add custom classes to each of your sliders. However, the Soliloquy plugin with CSS Addon saves time by allowing you to include custom CSS for each individual slider.
To add custom CSS to your WordPress image slider using Soliloquy, you’ll need to follow these steps:
- Step 1. Install and activate Soliloquy Slider plugin
- Step 2. Install and activate Soliloquy’s CSS addon
- Step 3. Create an image slider with Soliloquy
- Step 4. Add your custom CSS
Ready to get started? Let’s go!
Step 1: Install and Activate Soliloquy Slider Plugin
First thing you need to do is to install and activate the Soliloquy Image Slider plugin.
If you need help with this step, you should check out our documentation on how to install Soliloquy.
Step 2: Install and Activate Soliloquy’s CSS Addon
Upon activating Soliloquy, you’ll need to go to Soliloquy » Addons to install and activate the CSS Addon.
Step 3: Create an Image Slider with Soliloquy
Next, you should go to Soliloquy » Add New to create an image slider. Simply add a title and drop your slides into the Native Slider section.
To learn more about creating an image slider, check out our guide on how to create an image slider in WordPress.
Step 4: Add Your Custom CSS
After adding your slides, you can go to the Misc Tab and scroll down to the Custom Slider CSS field. Then go ahead and add your custom CSS here.
Make sure to hit the Update button to save your changes.
That’s all. We hope this article has helped you to learn how to add custom CSS in your WordPress image slider. You may also want to check out our guide on how to create an HTML slider in WordPress.
If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.
Terry Sullivan
I just received this error message when I attempted to install my slideshow. So what should I do next?
Fatal error: Maximum execution time of 30 seconds exceeded in /home1/breasart/public_html/wp-includes/class-wp-image-editor-imagick.php on line 363
Erica Franz
Hi Terry!
That error indicates you need to increase the
max_execution_time
on your site. I recommend following this guide to increase it yourself if your host allows you to: WPBeginner – How to Fix Fatal Error: Maximum Execution Time Exceeded in WordPressIf following that guide doesn’t resolve the error you’ll want to contact your host to increase this setting for you.
Thanks!
Ready to start creating slides the easy way?
Get Soliloquy Now