Although there is much debate over whether sliders are a good choice for a website, this tutorial is not meant to argue the merits, but just to help you position the captions in Soliloquy slider to best suit your image. The Soliloquy Lite WordPress plugin is a good choice for a basic, light, easy-to-use slider, and can easily be upgraded to Soliloquy, the premium version, if more features are required. The other benefits of using this slider is that clients can easily change the images, the text, and the pages or posts that are linked. It’s much easier and simpler to control than some other slider plugins.
This WordPress tutorial shows you how to position or move the captions in Soliloquy Lite Slider to the left or the right, lower and upper corners, so that the caption is visible, but doesn’t detract from the image. This way you can position the caption text where it is best for your images. Similar CSS can be used with other sliders, as well.
When setting up the slider for clients, I usually choose the Classic theme option, as in the image below. This option minimizes the slider controls, and makes it easy to style for each client because everyone likes it a bit different. You’ll notice in the image below that the text is centered, and the pager controls are at the bottom left, and the arrows are not displayed unless you hover over the image. Everyone wants the text larger, so I’ve already done that for this image.
(All images in this post from Death to the Stock Photo.)
But what if you wan to move the caption text so that it doesn’t cover so much of the image?
CSS Added by Soliloquy Slider
This is the CSS that is added by the plugin, so this is what we need to change to move the caption. The caption is absolutely positioned at the bottom of the slider.
<code>.soliloquy-container .soliloquy-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1120;
background: rgba(0,0,0,0.5);
}</code>
Move the Slider Caption to the Lower Left
The CSS for your slider caption should go either in your style.css or in a custom CSS plugin. The first thing you want to do is to change the width to auto, so that the caption is only the width of the text. Now the caption is right below the pager controls, so you can also move it up a bit, with bottom: 40px, instead of 0. Also add in the larger font-size.
<code>.soliloquy-container .soliloquy-caption {
font-size: 32px;
bottom: 40px !important;
width: auto !important;
}</code>
Position the Slider Caption in the Lower Right
This time you need to change the left position back to it’s default with left: auto. And then add the right: 0 position.
<code>.soliloquy-container .soliloquy-caption {
font-size: 32px;
right: 0;
bottom: 40px !important;
left: auto !important;
width: auto !important;
}</code>
Move the Slider Caption to the Upper Right
For the caption in the upper right, you need to change the bottom position to the default, and add a top position too.
<code>.soliloquy-container .soliloquy-caption {
font-size: 32px;
top: 40px;
right: 0;
bottom: auto !important;
left: auto !important;
width: auto !important;
}</code>
Position the Captions in Soliloquy on the Upper Left
To put the caption in the upper left, you need to change the bottom position to auto and the top to 40px.
<code>.soliloquy-container .soliloquy-caption {
font-size: 32px;
top: 40px;
bottom: auto !important;
width: auto !important;
}</code>
CSS for Slider Only on the Home Page
If you don’t like using !important in your CSS, you can use a more specific CSS selector, like .home if you only want to edit the slider for the home page. So the caption in the upper right corner could be:
<code>.home .soliloquy-container .soliloquy-caption {
font-size: 32px;
top: 40px;
right: 0;
bottom: auto;
left: auto;
width: auto;
}</code>
So which position is your preference for your slider captions?
I have used soliloquy lite in one of my wp website. I found it very easy to use.
A slider in home page of business website is a must to invoke customer calls.
Its a kind of visual CTA .
Thanks for your thoughts, Vinodh
THANK YOU!!! Exactly what I needed, written just when I needed it. I would love to see more articles on how to customize this excellent slider, which I’ve used on numerous sites.
Thanks for the kind words! I’m glad it helped.
I found that I had to add !important to the top example’s background color in order to get it to show up on one of my sites that uses the new Divi builder plugin. But, I didn’t need the positioning shown because the default position is at the bottom. I just needed larger text and the background, like this:
/* Make Soliloquy Lite slider captions readable */.soliloquy-container .soliloquy-caption {
font-size: 32px;
background: rgba(0,0,0,0.5)!important;
}
I have no idea why the default captions in Soliloquy are so stinking tiny! Other than that, it is my favorite slider because it scales the images proportionally as the page size gets smaller, instead of lobbing off people’s head or feet.
Thanks for the heads up on the caption background with the Divi plugin.
If you change the caption background to another color or transparency, you would also need to use !important on the background declaration.
Thank you Marcy. You saved me a lot of time :)
I use Soliloquy Lite and I cannot find where to change the CSS, could you please give a more detailed description? Thank you
The tutorial says, “The CSS for your slider caption should go either in your style.css or in a custom CSS plugin.”
I like to use the Custom CSS module in Jetpack or Simple Custom CSS – https://wordpress.org/plugins/simple-custom-css/
Thanks so much for this tutorial Marcy. This is the second time this weekend you have helped me (with “add a MailChimp signup form without a plugin” yesterday). Thanks again!
That’s great, Marjorie! Good to see you here.