How do I make the container semi-transparent in Twenty-Twelve?

  • Author
    Posts
  • #1255607

    sharonshero
    Member

    The container is white, but I’d like it to allow the background image to show through. Is there a snippet available to do this?

    The blog I need help with is lillipop.net.

    #1255733

    apply the following CSS:

    .site {
    background-color: rgba(255, 255, 255, 0.8);
    }

    Pay attention to the numbers in bold. The first three numbers are the RGB color for white (in other words, all three colors, Red, Green, and Blue, are set to maximum, which equals white).

    The last number is the opacity, with 0 being fully transparent, and 1 being fully opaque. You can adjust the 0.8 up or down until you find a level that lets you show the background image through while still being legible.

    #1255760

    sharonshero
    Member

    This is too easy! I spent a good amount of time rummaging around in Google and getting wildly complex half-answers. Thank you, your snippet the trick!!

    #1255947

    sharonshero
    Member

    oops, have another related question. I have a slide show that appears over the semi-transparent container. I would also like to make it’s background completely transparent or at least a semi-transparent white. Tried to adapt the earlier code provided, but it didn’t do anything. Currently it is a pale peach background. The page is located at http://lillipop.net/kids-show/
    Thanks!

    #1255978

    Try the following:

    .jetpack-slideshow {
    background: none;
    border: none;
    }

    A good trick for figuring out what styles you need to apply is using Chrome to Inspect the HTML (by right clicking on something, and then clicking Inspect Element). You can then navigate the HTML and see what CSS is currently being applied.

    #1255990

    sharonshero
    Member

    The snippet didn’t work, but possibly because I’m not putting it in the right place. Do I drop it in the CSS custom design or directly on the effected page? And if in the page, where would I place it? Sorry, I’m just scraping the surface with using CSS!!

    #1255991

    Doh! It should be .slideshow-window instead of .jetpack-slideshow

    And yes, it should go in the Custom CSS.

    #1255992

    Also instead of background: none; it should be background-color: none;

    You can also specify an RGBA color like we did above for the page background.

    #1255996

    sharonshero
    Member

    Ok, tried all of the above, but did not work… Anything else you can think of? Thx

    #1255999

    Hmm, try this:

    div.slideshow-window {
    background-color: none !important;
    border: none !important;
    }

    #1256005

    sharonshero
    Member

    Well, rats, no results either!

    #1256018

    Hmm, one more try, then I’m at a loss. Try this:

    div.slideshow-window {
    background-color: rgba(255,255,255,0) !important;
    border: 1px solid rgba(255,255,255,0) !important;
    }

    #1256019

    If that doesn’t work, I’ll bump this up to a moderator who can look at it (I don’t actually have the CSS addon on any of my blogs, so I can’t test it myself.)

    #1256020

    sharonshero
    Member

    Perseverance pays off!! Thank you, the background has gone away! I really appreciate your help on this one; it was quite the challenge!

    #1256021

    Nice. Glad I could help! It was certainly a challenge, but it paid off.

    #1256022

    Like I said, if you want to play with the transparency, just up the 4th number in the background-color to a decimal between 0.0 and 1.0.

    #1256023

    sharonshero
    Member

    Indeed! Thanks again.

The topic ‘How do I make the container semi-transparent in Twenty-Twelve?’ is closed to new replies.