Soliloquy Documentation
Documentation, Reference Materials, and Tutorials for Soliloquy
How to Display Text in Previous/Next Navigation Elements
Would you like to display text for your slider navigation Soliloquy as well as the arrows? We can show you how easy it is to do this with CSS! This tutorial will walk you through the steps on how to display text for your slider navigation as well as the arrows.
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 – 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-321916 .soliloquy-prev,#soliloquy-container-321916 .soliloquy-next {
width: auto;
height: auto;
background-image: none;
text-decoration: none;
}
#soliloquy-container-321916 .soliloquy-prev::before,
#soliloquy-container-321916 .soliloquy-next::before {
line-height: 30px;
color: #fff;
padding: 5px;
}
#soliloquy-container-321916 .soliloquy-prev::before {
content: "Previous Slide";
display: block;
}
#soliloquy-container-321916 .soliloquy-next::before {
content: "Next Slide";
display: block;
}[/css]
Be sure to update the -321916 with your own slider ID number
If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.
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 change the crop position for your Soliloquy slider images? Check out are tutorial on How to Change Crop Position for Slider Images.
FAQs
Q: Why isn’t my text translating?
A: Because you’ve addd your text into the CSS, it won’t be able to be translated by any translating plugin you may have installed.