How can I set the background of the Metro theme to be slightly transparent?

[gregsimas]

How can I set the content background of the Metro theme to be slightly transparent? I like what this guy did. http://blackandwhitelife.com/ It showcases the background picture without disrupting the reader. Here is another example (non-studiopress)  http://hipsterwpp.beantowndesign.com/blog/
My link http://m1p.org
Thanks, Greg

[Kahuna]

Greg,

I second that question. I would assume a simple CSS code change could achieve that and hopefully someone here has figured that code out.

BertPress

[gregsimas]

Kahuna,

Figured it out. I used what http://blackandwhitelife.com/ did and changed the colors and transparency level.

Just drop this code at the bottom of your Style CSS page.  Change the number (0.93) to make is less or more transparent.

If you have it set at 0.5 it will make it like 50% transparent. If you make it .80 it's 80% transparent. Mine is set to 0.93.  You get the idea.

Greg

#wrap {
clear: both;
padding: 2.25rem;
}

.footer-widgets, #wrap {
background-color: rgba(255,255,255,0.93);
margin: 2rem auto;
max-width: 1080px;
overflow: hidden;
}

[Kahuna]

Thanks Greg, I contacted Ted at blackandwhitelife.com. What a beautiful site, it re-energized me and here is what he said:

The transparency is done using CSS —> background-color: rgba(0, 0, 0, 0.8);

Thank you for your code and for letting us know about that transparency. I have finally found the Perfect WP theme for 3 of my sites thanks to you!

Mahalo

[wittycassiehere]

Thanks for this tip, guys. Great feature, and I love the way it looks on my own site. I noticed, however, that this makes the widget headers in my sidebar look a little funky. The header text is surrounded in a white box that stands out against the transparent background. Any known way to apply the transparency to these so it blends in nicely? I know if it were an image in my sidebar with a drop shadow, I'd want to save it as a transparent .png. But not sure how to get the same effect with this.

Note: This can't currently be viewed on my site. The theme is not yet activated - I've only implemented and previewed these changes while working in maintenance mode.

---

Cassie
[Witty Title Here]

[Author]

Posts