At the top of the home page of my new site, I have added a MetaSlider. The images have captions that are web development planning tips. If I switch them out occasionally, Google will give me credit for changing the content on my home page. But the words are not easy to notice, much less read … for a human.

This is a User Experience problem that can be solved with design decisions, an understanding of the structure of a WordPress website, and CSS coding skills. The tools involved are 1) Firefox Inspector to find the layers to change, Sublime to make coding changes, 3) WinSCP to upload the files to the server.

After the skills and tools needed for the job, let’s look at the options:
1. MetaSlider puts the text in an overlay at the bottom of the slider. The text and overlay can be manipulated with CSS.

2. The location of the text in the slider can be manipulated. One drawback to putting the text over another part of the slider is that it could cover up a face or other important feature of the image. Having had experience with sliders and text issues, I choose all photos with the face on the right hand, leaving the left side free for text.

3. Find out if the pro version has more options.

4. Choose a different slider plugin altogether.


I’m always for taking the easy route first, so let’s see what happens if I just make the text larger and bolder. The text is in an overlay, so there is some color from the photo behind it showing. This obscures the text, as well. And, while I’m at it, I think the text will be more noticeable if I center it.

Using Firefox Inspector, I know that the layers for the slider are in the .lp-slider layer. But, I also know that I will have to go inward a few layers to find the overlay.

From the screenshot at the right, you can see that the layers for the slider are:

  1. .lp-slider
  2. .lp-dynamic-slider
  3. .mo-slider-3-8-1
  4. #metaslider_container_120
  5. #metaslider_120
  6. .slides
  7. From here, we will skip the layers for the images and just get to the caption
  8. .caption-wrap
  9. .caption

.caption is the layer that holds the text, but is it the layer that also controls the overlay? If I increase the size of the font, will the overlay grow, or is the height set in a rule? These are things we can check in the code and test by changing the code.

Looking at .caption-wrap, it looks like it controls the opacity of the caption area. There is no height rule, so I can assume that the height is controlled by the contents. I will start by changing the opacity to .8 and setting the text-align to center.

.metaslider .caption-wrap
position: absolute;
bottom: 0;
left: 0;
background: black;
color: white;
opacity: 0.7;
margin: 0;
display: block;
width: 100%;
line-height: 1.4em;


Leave a Reply

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