Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Customize the Soliloquy Caption

We’re often asked this question:

“How do I style my captions like the caption you have on your home page?”

While we no longer display this slider on our homepage, we’ve moved it to this doc so you can continue to see an example of how easy it is to customize the position and styling of your Soliloquy captions using a little CSS.

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.

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 plugin <br />that you can count on.</h1>
    <a class="soliloquy-button" href="https://soliloquywp.com/pricing/" title="Click Here to Get Started with Soliloquy">Click Here to Get Started with Soliloquy</a>
</div>

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.

[i]
[i]