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

Replies to This Discussion

nic

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.

Unfortunately, the translation
I want to put a pic

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

Thank you ^ _ ^

You are very welcome.

=)

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

Looks great Brian!

That's amazing
Possible to put our code CSS

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> 

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

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.

RSS

Blog Posts

A Picture May Be Worth 1000 Members

Posted by Laura Occhipinti on September 20, 2014 at 7:51pm 1 Comment

Take pictures at EVERY event that you host for your group.  Do not…

Continue

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips