Snippet: Make Page Content Background Transparent for Boxed Layout

Updated: February 11, 2016

Here is some EXAMPLE CSS to help you make the boxed layout content "see-through" so that the background behind the content can be visible. You may need to make additional tweaks for your site but this should give you 2 concepts on how to achieve that look.

/* Option 1 => Using Opacity */
.boxed-main-layout #wrap {
    opacity: 0.8;
}

/* Option 2 => Using RGBA Colors */
.boxed-main-layout #wrap {
    background: rgba(255,255,255,0.5);
}

.wpex-sticky-header-holder {
    background: none;
}

.page-header,
#footer-callout-wrap {
    background: rgba(255,255,255,0.5);
}

.site-footer {
    background: rgba(000,000,000,0.7);
}

#footer-bottom {
    background: rgba(000,000,000,0.5);
}

Learn how to add custom CSS to your site.