Suggested by our VIP Member: dreadlockssite, I played around with the look of Ning's new Chat Box via the site. I haven't installed the new Chat on JenSocial 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!


  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("") no-repeat scroll 0 0 transparent!important;


New Apple Style By Brian Fløe - - Check out Brian's clean code:

Brian's site:

/* Apple Style Chat Box by Brian Floe  */
.xg_chat.chatFooter .xg_chatWindow {
position: absolute;
bottom: 0;
background: rgba(255, 255, 255, 0.95)!important;
color: #333;
height: 274px;
width: 100%;
border: 1px solid #B7B7B7;
z-index: 999;
padding: 20px 0px 0px 20px;
margin: 0px 20px 0px -20px!important;
border-radius: 15px 15px 0px 0px;
#xn_bar, .xg_theme-ningbar-bc {
background-color: white;
/* main room title text color */
#xn_bar a, .xg_theme-ningbar-c {
color: #333;
/* move "online now" box to the left */
.xg_chatWindow {
/* space between chat boxes */
.xg_chat.chatFooter .xg_verticalPane {



Have fun!

Views: 2873

Replies to This Discussion

Hi Jen 

IT worked first time - Way to Go ! TOP TIP - TY TY TY 



Looks great!

Thanks Siddiqui
Can you put me On this

Because I have so

My scroll bar is the way it looks on a Macintosh.

At first the chat worked fine on iPhones and iPads, but now it seems the main body is overlapping the chat?

Hey Brian,

I would send this to support, heard others report the same.




i can try this..but not working in my site..

Are you using the NEW Ning Chat? If yes, then you probably have an error in your CSS. Try adding code to top of Advanced CSS.



not sure what on earth am doing wrong. Tried the classic style CSS above but no scroll bars appeared and only one bar went blue.....oh dear am not so good at this am I ? :) 

I finally got around to using this tip today! I still need to work out some things (can't figure out where that grey lettering is coming from), but I am definitely on my way to having a great looking network!

Thank you for this, Jen!



© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips