CSS Addon

Would you like to add some bling to your slider images with some custom CSS? The CSS Addon for Soliloquy is a great tool to make small design changes on a per-slider basis. We’ll walk you through how to use the Soliloquy’s CSS Addon.

• Requirements
• Installation
• Setup
  1. Create or edit your slider
  2. Add your CSS
  3. Publish or Update your slider
• FAQ
  • I’m new to writing CSS, how can I get started?
  • Why isn’t my CSS change showing?
  • Is this the only way to add CSS?

Requirements

• Any Soliloquy license
• WordPress 4.8+

Installation

Please follow our instructions on how to install and activate addons.

In this instance, you’ll be activating the Soliloquy CSS Addon.

Setup

Step 1 – Create or edit your slider

Your first step is to create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Step 2 – Add your CSS

Next, navigate to the Misc tab.

Here you will find the Custom Gallery CSS field below the Enable RTL Support feature.

Within this box, you can add custom CSS tailored to that specific slider.

For example, let’s say the your slider has an ID of 237 and you want to add some extra padding above and below the slider. Simply add the following in the custom CSS box, replacing 237 with the ID of your gallery:

This will add 40 pixels of space both above and below the slider. Now let’s say you want to add some borders to your images. You can do it by adding this to the custom CSS box, again replacing 237 with the ID of your gallery:

Step 3 – Publish or Update your slider

Finally, click Publish or Update on your slider to save the changes.

The possibilities for customization are endless, and this makes it easy to contain your styles to specific galleries.

Check out some of our other styling docs to continue using custom CSS to change your slider look and feel.

FAQs

Q: I’m new to writing CSS, how can I get started?

A: You might find this tutorial helpful to get started using CSS to customize the appearance of your gallery.

Q: Why isn’t my CSS change showing?

A: Check that you’ve added your CSS to the Custom Slider CSS field and not the Custom Slider Classes field (shown below).

Q: Is this the only way to add CSS?

A: Not at all! Whether you want to change your sliders or anything else in your theme, you can use the WordPress Customizer to add Additional CSS.

Check out our guide on How to add custom CSS to the WordPress Customizer.