• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: background, content

  • This topic has 4 replies, 3 voices, and was last updated 10 years ago by wittycassiehere.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 12, 2013 at 11:06 am #19844
    gregsimas
    Member

    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

    February 14, 2013 at 10:30 am #20323
    Kahuna
    Member

    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

    February 14, 2013 at 1:35 pm #20364
    gregsimas
    Member

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

    February 14, 2013 at 3:46 pm #20408
    Kahuna
    Member

    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

    March 13, 2013 at 9:54 am #25866
    wittycassiehere
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble