Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

CSS Addon

The CSS addon gives you the ability to add custom CSS tailored to your specific sliders. This is a great addon if you want to be able to make small design and customization tweaks on a per-slider basis.

Required:
This Addon is available with any licensed version of Soliloquy.

Installation

You will first need to install and activate the CSS Addon.

How It Works

Once you have installed and activated the CSS Addon, navigate to Misc tab in the slider edit screen and you will see the Custom Slider CSS field:

You can add custom css to your slider in the Misc tab's Custom Slider CSS field using the CSS Addon for Soliloquy.

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:

#soliloquy-container-237 { margin: 40px 0; }

This will add 40 pixels of space both above and below the gallery. 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:

#soliloquy-container-237 .soliloquy-image { border: 5px solid #222; }

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

Looking for styling ideas? Check out our styling docs for ideas and examples to get started custom styling your sliders with CSS.


Troubleshooting

If your custom CSS isn’t being applied to your slider as you expect, check the following possible causes:

  • You’ve entered the CSS into the Custom Slider Classes field instead of the Custom Slider CSS field. If you haven’t yet installed/activated the CSS Addon you’ll see only the Custom Slider Classes field available which can be mistaken for the Custom Slider CSS field. Double-check that you’ve added your CSS to the correct field.
  • Your CSS styles have an error or are somehow invalid. Double-check that the CSS you’ve entered is correct and check if that resolves the issue.
  • Your CSS styles may need to use the !important declaration to override default styling for your slider. Consider adding this declaration to your styles and check if that resolves the issue.

Changelog

2.2.1 (2016-08-31)

  • Fix: URL being stripped from CSS field

2.2.0 (2016-06-21)

  • UI Refresh

2.1.2

  • Added: CSS Class input to individual slides when editing.

2.1.1

  • Fixed bug with single and double quotes being stripped from CSS improperly.

2.1.0

2.0.0

  • Say hello to version 2.0!
[i]
[i]