Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

Semi Transparent Module Body

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/full_screen_preview/3427687 

Your help would be very appreciated! 

Thanks! 

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

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • 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

  • 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..!

This reply was deleted.

Search the Creators Network

Latest Activity

Bernard Lama replied to Lea Scott's discussion Background pic disappeared
"Probably the image size is too big and it's taking a lot of time to load or your background image f…"
30 minutes ago
Bernard Lama replied to TJ @ jQueryHelp's discussion 3.0 and 2.0 Tip: Latest Activity Infinite Scroll - FREE
"Hi TJ, awesome tip. Thanks for sharing it."
34 minutes ago
Natalie H. replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"Ha! "Live and non functional" sums it up pretty well :)"
3 hours ago
Lea Scott replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"Its WAS good! Now all of my banners and background artwork pics have disappeared! My site looks so…"
4 hours ago
Lea Scott replied to Lea Scott's discussion Background pic disappeared
"And now my banners have disappeared! Not good ning!"
4 hours ago
Lea Scott replied to Lea Scott's discussion Background pic disappeared
"And I have tried reloading the pic and it is seen in the box but not on my website. My tickets are…"
6 hours ago
Strumelia replied to Asil's discussion Photo Slideshows Fail in NING 2.0
"Asil, FWIW I am now seeing the embedded slideshow in your original post here."
8 hours ago
Lea Scott replied to solo's discussion Chat room or chat rooms for your network....2.0 and 3.0 ning networks
"Hey solo, I have looked at this and it has created one automatically for me but I don't know how th…"
9 hours ago
Lea Scott replied to Rafael's discussion Multiple Chat rooms for Ning 3.0
"Agreed! That would be awesome and make a huge difference to traffic to the site!"
9 hours ago
Thisisbully replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
9 hours ago
Thisisbully replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"nope "
9 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Thanks Thiago :)"
10 hours ago
marshall blake replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"There is not any notification when people comment on status updates in the activity feed?"
11 hours ago
Fire-Tech replied to John Bizley's discussion A few tweaks I made to my activity feed
"Looks great John! Thanks for sharing :)"
11 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Looks great John! I threw mine together pretty quick before going to bed, but I'm glad you did the…"
11 hours ago
ceri shaw replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"I was told something similar when I called earlier on BUT it appears to be still live and still com…"
11 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Thanks J ;)"
11 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Looks good SE! I like the insets better on darker networks too. Have to do the same on my FTS site…"
11 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Glad you like it :)"
11 hours ago
John Bizley replied to John Bizley's discussion A few tweaks I made to my activity feed
"Thanks Chris :-)"
11 hours ago
More…