Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Customize the Soliloquy Caption

Would you like to customize the caption on your Soliloquy Slider? It is actually pretty easy to do, and you can use this guide to get you started on customizing your caption further. This should give you and excellent idea on how styling captions work in general, and this example shows you how to have them styled like the slider shown above.

This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.

Have a look at our slider demo below.

Caption HTML

The Caption field for each of your slides accepts HTML, which assists in controlling the style of your caption text.

To start, add the following HTML into the caption area for your image slide(s):

<div class="soliloquy-caption-wrap">
    <h1 class="soliloquy-fc-caption">Finally, a WordPress slider pluginYour title goes here</h1>
    <a class="soliloquy-button" href="https://soliloquywp.com/pricing/" title="Click Here to Get Started with Soliloquy">Call to action button</a>
</div>

The CSS

You will then want to add the following CSS to your active theme’s style.css file to style the caption output:

.soliloquy-container .soliloquy-caption {
	position: absolute !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 100 !important;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
	display: table !important;
        width: 100% !important;
        height: 100% !important;
	text-align: center !important;
	padding: 20px 0 35px !important;
        background-color: transparent !important;
}

.soliloquy-container .soliloquy-caption-inside .soliloquy-caption-wrap {
        display: table-cell !important;
        vertical-align: middle !important;
}

.soliloquy-container .soliloquy-caption h1 {
	color: #fff !important;
	font-size: 26px !important;
	margin: 0 0 50px !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
        line-height: 1.25em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.soliloquy-container .soliloquy-caption a.soliloquy-button {
        color: #fff !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	background-color: #ff3700 !important;
	border: 3px solid #fff !important;
	padding: 15px 20px !important;
	font-size: 14px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

	.soliloquy-container .soliloquy-caption {
		bottom: 13px !important;
	}

}

@media (max-width: 600px) {

        /** Hide the caption and control nav for small devices since they can swipe slides */
	.soliloquy-container .soliloquy-control-nav,
        .soliloquy-container .soliloquy-caption {
		display: none !important;
	}

}

That’s it! View your slider to see the custom styling applied following our guide, you can then go back and edit any of the HTML or CSS to further suit your specific needs.

Would you like to do some other cool things with styling Soliloquy? Take a look at our tutorial on How to Customize the Navigation Arrows.

FAQ

Q: Why can’t I open my slider image in the lightbox?

A:Styling your caption in this manner means you are giving your caption priority over the display so it appears directly over the image. This blocks the lightbox functionality.