Style Ning's New Chat Box!

[Jen]

Suggested by dreadlockssite, I played around with the look of Ning's new Chat Box via the Creators.ning.com site. I haven't installed the new Chat on my site for various reasons. I will soon. So, I have not tested this CSS on a live site yet. Anyone who tries out the CSS, we'd love to hear how it goes!

Instructions:

1. Adjust the styles below to suit your preference. All of the styles are documented.
2. Add to Advanced CSS via: My Network/Settings/Appearance/Advanced CSS

 

Classic Look:

/* Chat TitleBar Background/Title Color */
.xg_chat .xg_titleBar {background-color:#003366!important;color:#E9F8FE;}
.xg_chatWindow {
/* Main Chat Background/Border Color */
background: none repeat scroll 0 0 #ffffff!important;
border: 1px solid #B7B7B7;
/* Chat Messages/Comments and Member Names Color */
color: #003366!important;
}
/* Add Shadow/border to images - member icons */
.xg_chatWindow img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;
}
/* Hover Sender Messages */
.xg_chatWindow li.message:hover {background-color:#E9F8FE;}
/* Hover Members Online */
.xg_chatWindow ul.xg_userList li.userEntry:hover {background-color:#E9F8FE;}

 

---

With Background Image:

If you use a background image, be sure to change all of your styles above so all text is easy to read for your Site Visitors. As you can see in my example screenshot, mine needs work:

/* Alternate Chat Window Background Image, instead of color above */
.xg_chatWindow {color:#ffffff!important;
background: url("http://api.ning.com:80/files/HK8FcEqgWdSqESY0BvH7LOWG7s7Fjlk70ms4mhH-8gWdyrmn9CXRZ-E33MYgudumYkRqUgGIR9rupV8N8rZQq2uvY3XFxF1D/chat_beach_bg.jpg") no-repeat scroll 0 0 transparent!important;
}

 

Have fun!
Jen

You'll find a ton of Ning tips like this on JenSocial!

[Speed Racer]

also, I need to be able to change the color of the hover background in the members list. it is currently a white color, and it makes the dropdown (to view profile, ignore, etc) VERY hard to read the #99ffff letters I am using...

[Nancy Marsh]

Thanks Jen.

Is there a way to change the Titlebar label? We want it to be "The Lounge" rather than "Main Room".

[Jen]

I thought Kris of bikerspost had a discussion on this, but I couldn't find it. Best I remember, and this should work - - just go to Language Editor and search on "Main Room". Change and save.

My Network/Settings/Language Editor

Choose your language

Add search term to search box

[Nisanth Satheesh+One Man Only+]

thanks 

[dave]

I uploaded a semi transparent photo as a background which looked great and the rest of my site was nicely Visible through the chat room :-)

[HELP SEEKER]

cant change the member name colour and many other things, this script is not full :(

[Dr Husky (Emalejandro)]

Thanks Jen!

you are the best. 

[Truelee Blessed]

Has anyone figured out how to change the default color of the text while typing and the gray clock color to something else............help please

[JFarrow]

nice tip Jen!

[JFarrow]

nice tip Jen!

[Woody13]

dang... anybody's 'Click to Maximize Pane' not workin on the chat... ?

[Jen]

Hi Woody13,

Do you know if this tip is causing this? I didn't look to see what I did with this tip, about to walk out door. But, I need to address this, if it's causing an issue.

Thanks,

Jen