Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

VIP Ning Club
About VIP

~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!
Join Now!
Directory

Social Network Directory
Network HELP

Friends helping friends...
Free Ning Tips

Free Ning Network Tips

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://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

Favorite

1 member favorited this

Replies to This Discussion

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 !

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

Hi Jen

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

Ryan

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

Great!

Permalink Reply by GraveDollz Social on December 8, 2011 at 6:55pm

It Came out really good, jen, thanks everyone ;-)

http://gravedollz.ning.com

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

Looks great!

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

Thanks Siddiqui
Can you put me On this

Because I have so

Permalink Reply by Brian Fløe on December 9, 2011 at 4:05pm

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

Permalink Reply by Brian Fløe on December 9, 2011 at 4:06pm

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

Permalink Reply by JenSocial on December 9, 2011 at 4:12pm

Hey Brian,

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

Best,

Jen

Permalink Reply by iris on December 14, 2011 at 4:06am

jen,

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

Permalink Reply by JenSocial on December 14, 2011 at 12:09pm

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.

Best,

Jen

RSS

Welcome to
JenSocial: Social Network Directory / Social Web Directory

Sign Up
or Sign In

Or sign in with:

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club

All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.


Twitter	Facebook

Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!