Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
how-to-add-custom-css-to-your-wordpress-image-slider

How to Add Custom CSS to Your WordPress Image Slider

by Waseem Abbas on October 17, 2016

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.

Soliloquy website

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.

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.

Add New Slider

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.

CSS field

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.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Comments

    Terry Sullivan

    January 11, 2017

    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

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.