• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials Widgets & Plugins

Position or Move the Captions in Soliloquy Lite Slider

October 20, 2015 Updated on November 23, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

Although there is much debate over whether sliders are a good choice for a website, this tutorial is not meant to argue the merits, but just to help you position the captions in Soliloquy slider to best suit your image. The Soliloquy Lite WordPress plugin is a good choice for a basic, light, easy-to-use slider, and can easily be upgraded to Soliloquy, the premium version, if more features are required. The other benefits of using this slider is that clients can easily change the images, the text, and the pages or posts that are linked. It’s much easier and simpler to control than some other slider plugins.

soliloquy slider image caption upper right

This WordPress tutorial shows you how to position or move the captions in Soliloquy Lite Slider to the left or the right, lower and upper corners, so that the caption is visible, but doesn’t detract from the image. This way you can position the caption text where it is best for your images. Similar CSS can be used with other sliders, as well.

When setting up the slider for clients, I usually choose the Classic theme option, as in the image below. This option minimizes the slider controls, and makes it easy to style for each client because everyone likes it a bit different. You’ll notice in the image below that the text is centered, and the pager controls are at the bottom left, and the arrows are not displayed unless you hover over the image. Everyone wants the text larger, so I’ve already done that for this image.

soliloquy slider image classic theme

(All images in this post from Death to the Stock Photo.)

But what if you wan to move the caption text so that it doesn’t cover so much of the image?

CSS Added by Soliloquy Slider

This is the CSS that is added by the plugin, so this is what we need to change to move the caption. The caption is absolutely positioned at the bottom of the slider.

<code>.soliloquy-container .soliloquy-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1120;
	background: rgba(0,0,0,0.5);
}</code>

Move the Slider Caption to the Lower Left

soliloquy slider image caption left

The CSS for your slider caption should go either in your style.css or in a custom CSS plugin. The first thing you want to do is to change the width to auto, so that the caption is only the width of the text. Now the caption is right below the pager controls, so you can also move it up a bit, with bottom: 40px, instead of 0. Also add in the larger font-size.

<code>.soliloquy-container .soliloquy-caption {
	font-size: 32px;
	bottom: 40px !important;
	width: auto !important;
}</code>

Position the Slider Caption in the Lower Right

This time you need to change the left position back to it’s default with left: auto. And then add the right: 0 position.

<code>.soliloquy-container .soliloquy-caption {
	font-size: 32px;
	right: 0;
	bottom: 40px !important;
	left: auto !important;
	width: auto !important;
}</code>

Move the Slider Caption to the Upper Right

soliloquy slider image caption upper right

For the caption in the upper right, you need to change the bottom position to the default, and add a top position too.

<code>.soliloquy-container .soliloquy-caption {
	font-size: 32px;
	top: 40px;
	right: 0;
	bottom: auto !important;
	left: auto !important;
	width: auto !important;
}</code>

Position the Captions in Soliloquy on the Upper Left

To put the caption in the upper left, you need to change the bottom position to auto and the top to 40px.

<code>.soliloquy-container .soliloquy-caption {
	font-size: 32px;
	top: 40px;
	bottom: auto !important;
	width: auto !important;
}</code>

CSS for Slider Only on the Home Page

If you don’t like using !important in your CSS, you can use a more specific CSS selector, like .home if you only want to edit the slider for the home page. So the caption in the upper right corner could be:

<code>.home .soliloquy-container .soliloquy-caption {
	font-size: 32px;
	top: 40px;
	right: 0;
	bottom: auto;
	left: auto;
	width: auto;
}</code>

So which position is your preference for your slider captions?

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. vinodh says

    I have used soliloquy lite in one of my wp website. I found it very easy to use.
    A slider in home page of business website is a must to invoke customer calls.
    Its a kind of visual CTA .

    Reply
    • Marcy Diaz says

      Thanks for your thoughts, Vinodh

      Reply
  2. PseudoGeek says

    THANK YOU!!! Exactly what I needed, written just when I needed it. I would love to see more articles on how to customize this excellent slider, which I’ve used on numerous sites.

    Reply
    • Marcy Diaz says

      Thanks for the kind words! I’m glad it helped.

      Reply
      • PseudoGeek says

        I found that I had to add !important to the top example’s background color in order to get it to show up on one of my sites that uses the new Divi builder plugin. But, I didn’t need the positioning shown because the default position is at the bottom. I just needed larger text and the background, like this:

        /* Make Soliloquy Lite slider captions readable */
        .soliloquy-container .soliloquy-caption {
        font-size: 32px;
        background: rgba(0,0,0,0.5)!important;
        }

        I have no idea why the default captions in Soliloquy are so stinking tiny! Other than that, it is my favorite slider because it scales the images proportionally as the page size gets smaller, instead of lobbing off people’s head or feet.

        Reply
        • Marcy Diaz says

          Thanks for the heads up on the caption background with the Divi plugin.

          If you change the caption background to another color or transparency, you would also need to use !important on the background declaration.

          Reply
  3. Aurélien Debord says

    Thank you Marcy. You saved me a lot of time :)

    Reply
  4. Birte says

    I use Soliloquy Lite and I cannot find where to change the CSS, could you please give a more detailed description? Thank you

    Reply
    • Marcy Diaz says

      The tutorial says, “The CSS for your slider caption should go either in your style.css or in a custom CSS plugin.”
      I like to use the Custom CSS module in Jetpack or Simple Custom CSS – https://wordpress.org/plugins/simple-custom-css/

      Reply
  5. Marjorie Ray says

    Thanks so much for this tutorial Marcy. This is the second time this weekend you have helped me (with “add a MailChimp signup form without a plugin” yesterday). Thanks again!

    Reply
    • Marcy Diaz says

      That’s great, Marjorie! Good to see you here.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework