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:

  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;
}

 

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

Tags: chat, chat room, chatbar, new chat, new ning, ning chat, ning chat room, ning chatbar

Views: 1641

Replies to This Discussion

Permalink Reply by JenSocial on December 8, 2011 at 10:37pm

Thanks Brian, and couldn't agree more on your website design techniques. =)

Permalink Reply by Brian Fløe on December 7, 2011 at 7:12am

I haven't figured out yet how to style this however?

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

Brian,

This will change both bars on bottom - - the main room bar too. I tried nth child element, and it still changes both:

.xg_chat.chatFooter .xg_chatBar.xg_bottomBar a.xg_info {

background-image:none!important;color:#ffffff;background-color:#cc0000!important;

}

Best,

Jen

Permalink Reply by Brian Fløe on December 8, 2011 at 5:09pm

Awesome !

But it brings up a new problem:

I've tried changing the width and margins but I can't make the bottom bar the same with as the chat popup.

Permalink Reply by JenSocial on December 8, 2011 at 10:38pm

What's the code you're using to widen the left-bottom bar?

Permalink Reply by Fire-Tech on December 6, 2011 at 9:46pm

I wanted to wait until I heard more bugs were worked out before I played with it, but I'm all about the background image! You must have read my mind on the GIF too (you know how I love them).

As always; thanks a bunch :)

Time for some Photoshop! 

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

Hi Fire-Tech!

Always happy to know you're happy. ;-)

Have a great rest of week,

Jen

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

Hi Delliana,

I couldn't find a way to capture just those elements without changing font color for all.

Best,

Jen

Update:

I may have found it.

.xg_userList .userOptions > a {

color:#cc0000!important;

}

Permalink Reply by JenSocial on December 8, 2011 at 10:39pm

My pleasure, and hate to hear the new chat is still experiencing issues.

Permalink Reply by Cauldron of The Gray Witch on March 22, 2012 at 12:17pm

What about font size LOL , and by the way your a genius LOL

Permalink Reply by JenSocial on March 22, 2012 at 1:13pm

Flattery will get you everywhere, LOL. Nah, just been studying this platform for years.

Give this a try:

/* Overall Chat Room Font Size */
.xg_chatWindow, .xg_chatWindow a {

font-size:14px;

}
/* Chatter Font Size */
.xg_messageList li {

font-size:14px;

}

 

Best Regards,

Jen

Permalink Reply by ShineOnMS on December 8, 2011 at 5:05pm

Love this ive been wanting to add some color to my chat so i'm going to add it the code as above and see how it effects my network chat !

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips