Please note: This guide is only for the Redwood theme.
To add a boxed background behind your Featured Area Slider's text, you can copy and paste the following code into your Appearance > Customize > Custom CSS box.
Further down, we'll provide a few ways to customize the box's opacity, color, and text colors if you prefer a different look.
.feat-inner {
max-width: 30%;
padding: 50px;
margin: 0 auto;
background: rgba(255,255,255,.3) none repeat scroll 0 0;
}
@media only screen and (max-width: 960px) and (min-width: 768px){
.feat-inner {
max-width: 40%;
padding: 35px;
}}
@media only screen and (max-width: 767px){
.feat-inner {
max-width: 65%;
padding: 10px 15px;
}}
Changing the box's opacity & color
If you'd like to increase or decrease the background's opacity, look to line 5 in the above code. Do you see the ".3" number value? This controls the opacity/transparency of the box. You can change it to any value between 0 and 1. To make the box more opaque, increase the ".3" number. To make it more transparent, decrease the number.
To change the box's color from white to another color, you can again look to line 5 in the above code. Do you see the "255,255,255"? This is the RGB color code for the color white. You can change these 3 numbers to whatever RGB color code you prefer.
Here's a good color map to help you find a color's RGB code: https://www.w3schools.com/colors/colors_picker.asp
Changing the slider's text element colors
Want to change the category, post title, or "Read More" button colors within the Slider's box to make them contrast more against the new background color? No problem! You can copy and paste the following code into your Appearance > Customize > Custom CSS box as well.
Below, each text element has been set to the default white (hex color code of #ffffff). Feel free to change this to whatever color code you best prefer instead. For example, the hex color code for the color black is #000000.
/*SLIDER CATEGORY COLOR*/
.feat-overlay .cat a {color: #ffffff;}
/**/
/*SLIDER POST TITLE COLOR*/
.feat-overlay h2 a {color: #ffffff;}
/**/
/*SLIDER READ MORE BUTTON TEXT & BORDER COLOR*/
.feat-more {
color: #ffffff;
border-color: #ffffff;
}
/**/
/*SLIDER READ MORE BUTTON TEXT & BACKGROUND HOVER COLORS*/
.feat-more:hover {
color: #000000;
background-color: #ffffff;
}
/**/
If you find yourself with any questions regarding this, please don't hesitate to open up a new support ticket and let us know!