Soliloquy Documentation
Documentation, Reference Materials, and Tutorials for Soliloquy
How to Display Caption Below Slider
Would you like to display the caption below slider image? This is easily done with CSS! We’ll walk you through how easy it is to display the caption below the slider image.
This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.
Setup
Step 1 – Install and activate the CSS Addon
Your first step will be to install and activate the Soliloquy CSS Addon.
If you need any assistance in installing addons, please take a look at this article.
For this instance, we’ll be installing the CSS Addon.
Step 2 – Create or edit your slider
Next, create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.
Step 3 – Edit your slider images
Next, you’ll need to edit your images and add your captions and links.
To do this, click the blue pencil icon to open the Edit Item window.
Step 4 – Add image captions
Inside the Caption field, add your caption to your slider images.
Using the right and left arrow keys in the top right corner of the Edit Item window, you can navigate through each slider image adding the caption you wish to appear. Remember to click Save Metadata after each time you add your caption.
Step 5 – The CSS
Below is the CSS we’ve used in our demo.
You’ll need to change this ID number to match your slider ID number. You can find this by looking in the sidebar of your slider edit screen.
For more information on how to find your slider ID number you can read this article.
[css]#soliloquy-container-508332 {max-height: none !important;
}
#soliloquy-container-508332 .soliloquy-caption {
position: relative !important;
}[/css]
Be sure to update the -508332 with your own slider ID number
If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.
Mobile only CSS
If you want to use this CSS for mobile devices only, use the CSS shown below.
[css] @media screen and (max-width: 600px) {#soliloquy-container-508332 {
max-height: none !important;
}
#soliloquy-container-508332 .soliloquy-caption {
position: relative !important;
}
}
[/css]
Check out our demo of this in action!
Once you click Publish or Update on your slider, you’re all set!
Would you like to do some more cool things with CSS? Check out our tutorial on How to Remove the Default Caption Background.
FAQs
Q: Why isn’t the CSS working?
A: Check that the Slider Transition on the Config tab isn’t set to Scroll Vertical. This CSS won’t work correctly if this Slider Transition is selected.
