Position or Move the Captions in Soliloquy Lite Slider

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?