MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add boxed background behind Redwood's Featured Slider's text overlay

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!