Individually styled sliders

The sliders - by default - have a tasteful and neutral styling.

To add an extra class to a slider (for styling purposes), you can use:

{slider title="My Title" class="myclass"}

Color Classes

Sliders' stylesheet comes with styling for the classes blue, green, orange, red and grey.

Bootstrap Classes

You can also use the Bootstrap classes primary, info, success, warning and danger / error.

Solid Colors

Sliders comes with ready-to-use solid and color_content classes you can combine with the above mentioned color and state classes:

Custom styling

If you have sufficient CSS knowledge you can also add your own classnames and styling via CSS.

Take a look at the stylesheet that comes with Sliders in: /media/sliders/css/style.css

You can overrule the Sliders stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/sliders/style.min.css

That way you can fully customize the styling of the sliders.

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. But Sliders will load the file named style.min.css, regardless of whether the css inside that file is minified or not.
The original LESS files are included in the /media/sliders/less folder.

Here are 2 examples of what you can do.

Styling the slider title

Sliders allows you to style the title you place in the {slider} tag - right inside the tag. So you can make it bold or another font or even place images in there.

Icon class

Use the icon class on the sliders to show a + or - depending on the state of the slider

Note: This does require the Sliders stylesheet and the Icomoon font styling to be loaded.