Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Display Caption Below Slider

Would you like to display the caption below slider image? We’ll walk you through how easy and quickly you can do this with some simple CSS.

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

Setup

Create or edit your slider

Your first step is to create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Install and activate the CSS Addon

The next step you’ll need to install and activate Soliloquy’s CSS Addon. Navigate to the Addons section and click Install then Activate on the CSS Addon.

Activate the CSS Addon to begin adding custom CSS to your Soliloquy slider

The CSS

Below is the CSS we’ve used in our demo.

You’ll need to change this ID number to match your gallery ID number. You can find this by looking in the sidebar of your gallery edit screen.

For more information on how to find your gallery ID number you can read this article.

You can also just add this CSS to the WordPress Customizer to make this change for all of your Envira Galleries!

To find out more about the WordPress Customizer, please review our article on How to add custom CSS to the WordPress Customizer.

If you’re using the CSS Addon to only change 1 slider, add your CSS to the Misc tab inside the Custom Slider CSS box.

Change the caption position under the image by adding your CSS to the Misc Tab in the Custom Gallery CSS box

Once you’ve added your CSS just click Publish or Update to save the changes to the gallery.

#soliloquy-container-193 { 
  max-height: none !important; 
}
#soliloquy-container-193 .soliloquy-viewport { 
  height: auto !important; 
}
#soliloquy-container-193 .soliloquy-caption { 
  position: relative !important; 
}
Be sure to update the 193 with your own slider ID number

Mobile only CSS

If you want to display this CSS for mobile devices only, use the CSS shown below.

@media screen and (max-width: 600px) {
#soliloquy-container-193 { 
  max-height: none !important; 
}
#soliloquy-container-193 .soliloquy-viewport { 
  height: auto !important; 
}
#soliloquy-container-193 .soliloquy-caption { 
  position: relative !important; 
}
}

And that’s it! 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.

Be sure that the Scroll Vertical isn't used when using this CSS