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! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

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. Released 4/9. 

APIs - The ability to create new members and content programatically.

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

Latest Activity

soaringeagle replied to Margaret Lynn Rosack's discussion 'Creator + Member'
"sure just create a second profile"
15 minutes ago
soaringeagle replied to Troy Marquis's discussion 'Ning Activity feeds Going CooCoo's'
"just tested mines fine"
16 minutes ago
Jeffrey Haskins replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Thanks...works perfectly!"
37 minutes ago
Troy Marquis replied to Troy Marquis's discussion 'Ning Activity feeds Going CooCoo's'
"since last friday"
57 minutes ago
Troy Marquis replied to Troy Marquis's discussion 'Ning Activity feeds Going CooCoo's'
"same here"
58 minutes ago
Strumelia replied to Margaret Lynn Rosack's discussion 'Creator + Member'
"I also use a 'ghost' membership to monitor whether some members are using their Friend…"
1 hour ago
Kira Slye replied to Kira Slye's discussion 'Do we immediately have to pay for a new plan when migrating to 3.0?'
"Can i ask for ONLY my members and my photos to be migrated, or do I have to have everything…"
1 hour ago
Kos replied to Crystal Coleman's discussion 'Ning 3.0 Progress Update for March and Let's Hear Your Thoughts'
"I hope you all have "voted" in the poll Ning is taking on what feature to roll out…"
1 hour ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service