JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Style Ning's New Chat Box!

Suggested by our VIP Member: 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 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!

Instructions:

Adjust the styles below to suit your preference. All of the styles are documented.
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://storage.ning.com/topology/rest/1.0/file/get/1061568037?profile=original") no-repeat scroll 0 0 transparent!important;
}

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

Brian's site: www.MyAppleSpace.com

/* 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 {
margin-right:-20px;
}
/* space between chat boxes */
.xg_chat.chatFooter .xg_verticalPane {
margin-left:20px!important;
}

Have fun!
Jen

2 members favorited this

Replies to This Discussion

Permalink Reply by Ahmad on December 5, 2011 at 10:49pm

nic

Permalink Reply by JenSocial on December 6, 2011 at 2:51pm

Not sure what you want to "put here"?
If you mean you want to change the background color, see this code in tip:

/* Chat TitleBar Background/Title Color */
.xg_chat .xg_titleBar {background-color:#003366!important;color:#E9F8FE;}

Best,
Jen

P.S. Do you mean you want the arrows? If yes, not ready for that level of customization. However, and ironically - - I was working on a blinking gif when you wrote.

Permalink Reply by Ahmad on December 6, 2011 at 2:54pm

Unfortunately, the translation
I want to put a pic

Permalink Reply by JenSocial on December 6, 2011 at 3:02pm

ahhh, okay. It will only be displayed within the confines of the title bar. Instead of the code I provided, try this:

/* Chat TitleBar Background/Title Color */
.xg_chat .xg_titleBar {background:URL("yourimage") scroll 0 0 no-repeat;}

Permalink Reply by Ahmad on December 6, 2011 at 3:05pm

Thank you ^ _ ^

Permalink Reply by JenSocial on December 6, 2011 at 3:08pm

You are very welcome.

Permalink Reply by 1vheovex5wts2 on December 6, 2011 at 3:45pm

I turned the Chat beta on a few days ago and immediately styled it like you can see below.

The new chat is mind blowing. To think that it's the same company that brought us the last 3 chat module nightmares is hard to understand.

I suggested Ning look at the facebook chat, but my members are telling me it's BETTER than the facebook chat.

I'm still just mind blown about this. Is this real? Am I dreaming? It's fast, reliable with only a few instances of "dying" on me but it's still in Beta. We can style it, private messages pop up so people actually KNOW that you are messaging them (what a concept).

Ning - thank you thank you thank you.

My site: www.MyAppleSpace.com

Permalink Reply by JenSocial on December 6, 2011 at 3:49pm

Looks great Brian!

Permalink Reply by Ahmad on December 6, 2011 at 5:17pm

That's amazing
Possible to put our code CSS

Permalink Reply by 1vheovex5wts2 on December 7, 2011 at 7:10am

Thanks Jen. I wanted to cut away the clutter and bring the people and the actual conversation into focus. I believe the website should get out of the way, and so should the chat. It's the conversation.

Here's the code:
<div>

/*NEW LIVE CHAT SUNDAY MAS */
.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 {
margin-right:-20px;
}
/*space between chat boxes*/
.xg_chat.chatFooter .xg_verticalPane {
margin-left:20px!important;
}

</div>

Permalink Reply by JenSocial on December 7, 2011 at 11:19am

Well, in regards to your comment: "... I wanted to cut away the clutter and bring the people and the actual conversation into focus." You sure accomplished that Brian, really looks great.

And to share your code? Very generous, and I'm sure a lot of people will appreciate this. I just looked again, it's really lovely. If you don't mind me adding your code to the tip, I'd love to. BTW, not sure why but you have a DIV wrapping the code.

Thank you Brian!

Jen

Permalink Reply by 1vheovex5wts2 on December 8, 2011 at 4:13pm

Hi Jen

Go right ahead and add it to your tip.

I thought I had to write the code inside a <div> if it was going to show up in the forum?

The design philosophy of course has roots in all things Apple, obviously. But I have really learned it myself over time, cause in the beginning when I did MyAppleSpace (MAS) it was very cluttered and very very different. I learned over time from doing graphics over and over that just because you CAN, it doesn't mean you SHOULD.

Make the website "transparent" and the content will get the focus. If the content get's the focus, we can guess who's motivated to add more ...content.