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

Community Forums Forums Design Tips and Tricks How can I set the background of the Metro theme to be slightly transparent?

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  wittycassiehere 1 year, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #19844

    gregsimas
    Participant
    Post count: 5

    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

    #20323

    Kahuna
    Participant
    Post count: 14

    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

    #20364

    gregsimas
    Participant
    Post count: 5

    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;
    }

    #20408

    Kahuna
    Participant
    Post count: 14

    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

    #25866

    wittycassiehere
    Participant
    Post count: 14

    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.


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.