Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Carousel: Reposition Captions

Note: This document is relevant only if you have a Multi, Developer or Master license and you’re using the Carousel Addon.

By default captions overlay the image when carousel is enabled on your Soliloquy slider. For short captions this can work very well, but if you have long captions they may cover your entire image. Whether for practical or aesthetic purposes, you can reposition the captions with just a few CSS additions.

Soliloquy Carousel with Captions

The default styling of our captions when carousel is enabled, using the Base slider theme.

We’re going reposition the caption below the carousel image in two possible ways:

  • To affect all sliders on your site, include the CSS at the bottom of your theme’s style.css file;
  • To affect a specific slider only, include the CSS in the Custom CSS field under the Misc tab when editing your slider.
.soliloquy-container .soliloquy-wrapper {
   overflow: hidden !important;
}
.soliloquy-container .soliloquy-viewport {
   overflow: visible !important;
}
.soliloquy-container .soliloquy-caption {
   position: relative !important;
}

And the result: captions displayed below the image, and the navigation arrows centered vertically.

Soliloquy Carousel with Repositioned Captions

[i]
[i]