Skip to main content

Ability to make content background semi-transparent in AWARE theme?

I use a background image on my site. Most of my headers, sliders, etc are designed to make that background in view. Is there a way to make the content background semi-transparent, such as with the FOCUS theme? 

Official response from

You can apply translucent CSS3 "background-color" rules to the desired site elements in your theme.scss and tablet-and-desktop.scss files in order to make their backgrounds translucent. For example, these background-color style rules will generate a white background color with 50% opacity:

background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FFFFFFF', EndColorStr='#7FFFFFFF');

The first line is a non-translucent fallback background color, in case the browser is too old to support translucent background colors. The second line is a general CSS3 rule for newer standards-compliant browsers, and the third line is for older versions of Internet Explorer.

Assuming that you're using the default layout with sidebar, to make the main text area in Aware translucent with the above rules, find and replace the styles for the ".twocolumn-container .left-column, .twocolumn-container .right-column-wide" selector in tablet-and-desktop.scss with:

.twocolumn-container .left-column, .twocolumn-container .right-column-wide {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FFFFFFF', EndColorStr='#7FFFFFFF');
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ebebeb;
float: left;
width: 68.2261208577%;
margin-right: 1.559454191033%;
margin-bottom: 0;
}

and in theme.scss with:

.twocolumn-container .left-column, .twocolumn-container .right-column-wide {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FFFFFFF', EndColorStr='#7FFFFFFF');
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ebebeb;
margin-bottom: 15px;
}

You can learn more about CSS background colors here: http://www.w3schools.com/cssref/pr_background-color.asp

Share this post

Showing 6 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.