Add Transparency to the Slider Caption Background

Introduction

Note: This tutorial works with the options available in the Spotlight Settings > Slider Caption options panel. For a general overview of the Spotlight area, and to learn more about the various slider configurations read the Spotlight Block Overview.

ThemeStarta can be used to apply any color you want to the background of your slider captions. If you don’t want a color, you can also select “None” so that your captions appear directly on the content of your slider without an overlay background.

But what if you want to apply a semi-transparent overlay as your slider caption background?

A transparent overlay can be of any opacity, so the answer really depends on what type of transparent background you want to apply. There is no setting in ThemeStarta to do this directly, however ThemeStarta does give you the ability to apply any background image you want as your slider caption overlay. Therefore, all you have to do is create a transparent background for your overlay and upload it using ThemeStarta for use as your slider caption background.

The following tutorial shows you how to do it.

Add a Transparent Slider Caption Image

Note: You will need to create a transparent image for use using an image editing tool such as Photoshop, or one of the many free online image editing tools that are available. We recommend creating the image first and applying the opacity that you want to create the desired transparent effect you’re looking for, then cropping or exporting the image you create with a measurement of 1px x 1px wide. The smaller your transparent image the less it will impact load time of your site. 

1. In ThemeStarta, click the Spotlight Settings > Slider Captions > Background bar.

2. Click the  button to change the default background color to “none”.

3. Upload your transparent background image using the Image Upload tool.

Note: The maximum size of any background image should be 1px x 1px. Your transparency is up to you, but opacity levels of 40 – 60% usually create a nice effect.

4. Set your Background Image Tiling to “Both Directions” so that your image repeats horizontally and vertically to fill the entire caption area.

Your settings should look something like this:

TIP: The image file name shown above is an example only, but notice that it includes the number “60″. It is good practice to create multiple transparent images for use in your caption area for testing purposes, and name them to reflect the level of opacity applied. In the above example, we can readily tell that the image used has an opacity of 60%. If you create multiple images and label them in this way, you can keep a library of transparent image affects that are readily available for use as your design more and more themes.

5. Click  to apply the change in the ThemeStarta preview.  

6. Click  to apply your changes to your live WordPress theme.   

Demo: If you want to view a demo of how the above settings look when applied to the caption area of a slide, take a look at the second slide in the AnglePane WordPress theme demo here