Hello, 

I have read various discussions about adding a semi-transparent background to the body of a site while allowing the text and other content to still be fully visible, but I can't get it to work on my site. 

I have added opacity css to the .xg_theme #xg_body and it makes the whole page semi transparent 

I added the same code to the .xg_theme .xg_module and it makes the whole module and content within it transparent. 

Please advise on how to create a semi transparent black background for my page that allows the content in the modules to still be fully visible. Similar to this site -  http://themeforest.net/item/clubber-events-music-wordpress-theme/fu... 

Your help would be very appreciated! 

Thanks! 

My site is still under construction - www.midwestmusik.com 

Tags: design, opacity, transparent

Views: 335

Reply to This

Replies to This Discussion

Try to set this instead:

#xg.xg_widget_main.xg_widget_main_index.xg_widget_main_index_index

have you tried #xg_body {

im almost doing that right now.... http://yubasutterconnect.com

I take it you've read through this is detail: http://www.ning.com/help/?p=3477

I've used the basic code from that for a couple of years now on my profile page on our site....I recently migrated to a slight gradient for the body area as things got difficult to read with a complex image in the background at times but you can see what I've done with static background http://www.navydads.com/profile/PaulCorona

for the body code I used:

#xg_body,
.xg_bodybg,
.xg_floating_container {
    background-repeat: repeat-x;
}

and


/*----------------------------------------------------------------------
    Body (#xg_body and descendants)
----------------------------------------------------------------------*/
#xg_body {
    background-position: left bottom;
         background-color:transparent;
}
#xg_body a:hover {
    color: #1A3459;
}
#xg_body h1 {
    background-color:transparent; },
.xg_module_head {
    background-color:#1a3459;
    color:#ffffff; },
.xg_module_body h3 {
    background-color:transparent; },
.xg_module_body caption {
    color: #1a3459;
}
.xg_module_head {
    border-bottom: 2px solid #1a3459;
}
.notitle {
    display:none!important;
}
ul.pagination li.this span {
    border-color: #fff;
    color: #1a3459;
}

Hey everyone thanks for your examples - I tried them all - what I ended up doing is using Photo shop to create an image that appears transparent by having the background layer source be the image I use in my website background then add another layer, a black (or any color you want) layer on top set to .3 opacity so that you see the background through it. When you save it as a png and upload it as the image for the main content, setting the modules to transparent - the background has a black shade over the background giving it the semi-transparent look I wanted. Thanks for your help! 

that is exactly the approach I've used recently:

Check out our site > http://uk-christians.net

We've made the modules' backgrounds semi-transparent by using an Adobe Fireworks image

The way it should be done is using a RGBA color code with the occupancy added at the end. To make the color more pronounced or more transparent just raise or lower the number 0.43 at the end of the code. Here's the code.

#xg_body{
 background-color: rgba(000, 000, 000, 0.43)!important;}

Thanks George, I'll try this out.

You're welcome Alexander
If you want it just for the modules Like on your site here's the code for that. :-)
.xg_module{
    background-color: rgba(000, 000, 000, 0.43)!important;}

Thanks again.. I'll try them out tomorrow..!

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next!

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums.

APIsThe ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Strumelia replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"+1"
2 minutes ago
Strumelia replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"I've been saying this exact thing for months and months John.  It seems like simple…"
4 minutes ago

NC for Hire
SweetPotato replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"I think this might be in response to how pages were migrating over - they needed to be better…"
11 minutes ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"tru dat its a minor detail and works fine as is just didnt expect it to be applied universally when…"
21 minutes ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"the :"what were working on" needs to be updated since all but 1 of them were released and…"
24 minutes ago
Strumelia replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"I do know what you mean.  On the other hand, it's easy to simply start my article by…"
25 minutes ago
Thammy Om replied to Lorenzo M. Oliver's discussion '[NING 3.0 EMIGRACIÓN] PROCESO' in the group Ning Networks en español
"Y eso lo hay? Alguna sugerencia?"
26 minutes ago
John Bizley replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Once again this is all very nice BUT this is what is really peeing me off, we keep getting these…"
28 minutes ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service