How do I make the container semi-transparent in Twenty-Twelve?
-
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: (visible only to logged in users)
-
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.
-
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!!
-
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! -
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.
-
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!!
-
Doh! It should be .slideshow-window instead of .jetpack-slideshow
And yes, it should go in the Custom CSS.
-
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.
-
-
Hmm, try this:
div.slideshow-window {
background-color: none !important;
border: none !important;
} -
-
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;
} -
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.)
-
Perseverance pays off!! Thank you, the background has gone away! I really appreciate your help on this one; it was quite the challenge!
-
-
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.
-
- The topic ‘How do I make the container semi-transparent in Twenty-Twelve?’ is closed to new replies.
WordPress.com Forums 