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!

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

Views: 4458

Reply to This

Replies to This Discussion

Is there a particular size the image needs to be?   (Awesome tips, btw. I'm going to try this out on my test network!)

Hi Diane,

You can make it larger than needed, but I wouldn't go too large for load time. What I did? I measured the box with my browser ruler, didn't even try to see width/height in the CSS. Then I sized the beach/water image to be around 75 pixels more in both directions.

Best,

Jen

Thanks Jen! You are superfab!

Put it on my site (farm-dreams.com), looks great, works great...thanks!

Such a great member/avatar name. ;-)

Hey Bon and Kris, Thanks. Yeah, I have to say, I even notice the chat slowing down page load here on Creators. I'm waiting a while longer.

like the shadow once Ning as all bugs worked how I might have to give these some play

Any way to change the color of the chat bar before it is clicked on?  The silver just does not stand out enough for people to find the chat.....

We're working on updating that color to match the color of the title bar when the panel is open.

For now Maxx, give this a try. First you need to remove the background image, then set the bg color:

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

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

}

Thanks! I actually just used this to change the colors for the time being... 

This is why Jen is the absolute best!    I've put it on my site www.myjaguarlife.com and it works great!

Thanks Jen!

Rob

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Crystal Coleman replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"Evandro,  As soaringeagle suggested, you never replied to any of the confirmation emails after…"
33 minutes ago
Just Asking replied to Just Asking's discussion 'Does anyone know how to remove the center line in the sign-in/sign-up module?'
"No, but since I did a custom background, to me, it looked out of place. I was hoping for a look…"
55 minutes ago
Just Asking replied to Just Asking's discussion 'Does anyone know how to remove the center line in the sign-in/sign-up module?'
"YES!!!  That was it! Thank you very much!  :D"
56 minutes ago
George H. Compton IV replied to George H. Compton IV's discussion 'TIP N3 flexslider,,, Easy install'
"I'm sure there is a way to do that. I just added a way you can insert these into individual…"
1 hour ago
francesco pillinini replied to francesco pillinini's discussion '3rd Party Integration > Facebook'
"Got it working thank you :)"
1 hour ago
francesco pillinini replied to francesco pillinini's discussion '3rd Party Integration > Facebook'
"I Have Sorted this out Now!!Closed OutComing out or coming out of the closet, publicly revealing…"
2 hours ago
Kos replied to Riccardo Rossini's discussion 'Petition: please Ning, give us a "white label" plan'
"Although my instinct tells me Ning's TOS would still apply, I do think a white label plan…"
2 hours ago
Elshara Silverheart replied to Mary Jane Peterson's discussion 'adding friends'
"I know in 2.0 the limit for members is 100 and for 3.0 its probably the same not sure. In the admin…"
3 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service