Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

Iv'e aded some cool things to spark up the chat box on the main page and the Main Chat Window.

You can change the colours to suit your site. The black background you see is my site and is not part of the chat box. There is some rotation applied in the Main Chat Page so keep an eye out for that. :-)

OK Update- "Glassy Reply's"... "Check out Update 2"

                            " Check Out Update 3 "

Just add to your advanced css Thank you for looking :-)

Check it out , i hope you enjoy :-)

div.xg_chatWindow {

border-top-left-radius:15px;

border-top-right-radius:15px;

}

p._message {

transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);

-webkit-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);

-moz-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);

-o-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);

-ms-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);

}

li.message {

-moz-box-shadow: 0px 0px 9px #000000;

-webkit-box-shadow: 0px 0px 9px #000000;

box-shadow: 0px 0px 9px #000000;

}

li.message {

        -moz-border-radius: 50px 50px 50px 50px;

-webkit-border-radius: 50px 50px 50px 50px;

padding: 1px;

background: -moz-linear-gradient(center top, #1fadd1 3%,#ffffff 89%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #1fadd1),color-stop(0.89, #ffffff));

}

div.xg_chatWindow {

border:groove 5px #ffffff;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:0px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:0px;

border-top-left-radius:15px;

border-top-right-radius:15px;

border-bottom-left-radius:5px;

border-bottom-right-radius:0px;

}

div.xg_chatBar.xg_titleBar.xg_theme-ningbar-bc.xg_theme-ningbar-c {

border:groove 5px #31cde8;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:0px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:0px;

border-top-left-radius:15px;

border-top-right-radius:15px;

border-bottom-left-radius:5px;

border-bottom-right-radius:0px;

}

div.xg_chatWindow {

-moz-box-shadow: -1px -6px 20px #000000;

-webkit-box-shadow: -1px -6px 20px #000000;

box-shadow: -1px -6px 20px #000000;

}

p.chatTitle.xg_info {

-webkit-animation: cssAnimation 2.3997s 1 ease;

-moz-animation: cssAnimation 2.3997s 1 ease;

-o-animation: cssAnimation 2.3997s 1 ease;

}

@-webkit-keyframes cssAnimation {

from { -webkit-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }

to { -webkit-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }

}

@-moz-keyframes cssAnimation {

from { -moz-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }

to { -moz-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }

}

@-o-keyframes cssAnimation {

from { -o-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }

to { -o-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }

}

textarea.xg_chatInput {

-moz-box-shadow:inset 1px -1px 17px #bababa;

-webkit-box-shadow:inset 1px -1px 17px #bababa;

box-shadow:inset 1px -1px 17px #bababa;

}

div.xg_messageListFooter {

-moz-box-shadow:inset 1px -1px 17px #bababa;

-webkit-box-shadow:inset 1px -1px 17px #bababa;

box-shadow:inset 1px -1px 17px #bababa;

}

p.xg_info.xg_activeConversations {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

p.chatTitle.xg_info {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

ul.xg_messageList {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

div.xg_messageListFooter {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

div#mainRoomHeading.xg_messageListHeading {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

ul.xg_userList.chatUsers {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

li.mainRoom.active {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

div#userListContainer.xg_chatWindow.sideChatContainer {

-moz-box-shadow: 2px 2px 11px #2b2b2b;

-webkit-box-shadow: 2px 2px 11px #2b2b2b;

box-shadow: 2px 2px 11px #2b2b2b;

}

ul.xg_userList.chatUsers {

border:solid 1px #ffffff;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright:0px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-webkit-border-top-left-radius:0px;

-webkit-border-top-right-radius:0px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-top-left-radius:0px;

border-top-right-radius:0px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

"UPDATE 2 Below"

This update changes the avatar and icons to round with shadow.

if you want to use this , just remove the code above and replace with this one.

img._avatar {
-moz-box-shadow: 5px 4px 11px #2b2b2b;
-webkit-box-shadow: 5px 4px 11px #2b2b2b;
box-shadow: 5px 4px 11px #2b2b2b;}
img._avatar {
border:none 0px #1fadd1;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;}
div.xg_chatWindow {
border-top-left-radius:15px;
border-top-right-radius:15px;
}
p._message {
transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);
-webkit-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);
-ms-transform: rotate(0deg) scale(.9) skew(0deg) translate(10px);
}
li.message {
-moz-box-shadow: 0px 0px 9px #000000;
-webkit-box-shadow: 0px 0px 9px #000000;
box-shadow: 0px 0px 9px #000000;
}
li.message {
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
padding: 1px;
background: -moz-linear-gradient(center top, #1fadd1 3%,#ffffff 89%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #1fadd1),color-stop(0.89, #ffffff));
}
div.xg_chatWindow {
border:groove 5px #ffffff;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
div.xg_chatBar.xg_titleBar.xg_theme-ningbar-bc.xg_theme-ningbar-c {
border:groove 5px #31cde8;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
div.xg_chatWindow {
-moz-box-shadow: -1px -6px 20px #000000;
-webkit-box-shadow: -1px -6px 20px #000000;
box-shadow: -1px -6px 20px #000000;
}
p.chatTitle.xg_info {
-webkit-animation: cssAnimation 2.3997s 1 ease;
-moz-animation: cssAnimation 2.3997s 1 ease;
-o-animation: cssAnimation 2.3997s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(0.625) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(0.975) skew(1deg) translate(0px); }
}
textarea.xg_chatInput {
-moz-box-shadow:inset 1px -1px 17px #bababa;
-webkit-box-shadow:inset 1px -1px 17px #bababa;
box-shadow:inset 1px -1px 17px #bababa;
}
div.xg_messageListFooter {
-moz-box-shadow:inset 1px -1px 17px #bababa;
-webkit-box-shadow:inset 1px -1px 17px #bababa;
box-shadow:inset 1px -1px 17px #bababa;
}
p.xg_info.xg_activeConversations {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
p.chatTitle.xg_info {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
ul.xg_messageList {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
div.xg_messageListFooter {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
div#mainRoomHeading.xg_messageListHeading {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
ul.xg_userList.chatUsers {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
li.mainRoom.active {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
div#userListContainer.xg_chatWindow.sideChatContainer {
-moz-box-shadow: 2px 2px 11px #2b2b2b;
-webkit-box-shadow: 2px 2px 11px #2b2b2b;
box-shadow: 2px 2px 11px #2b2b2b;
}
ul.xg_userList.chatUsers {
border:solid 1px #ffffff;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

"New screen shot of what it looks like.New Update 2"

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

First Code 1

UPDATE 3

This update changes the headers to nice glass ones with a change in colour on hover. Of Course you can change the colour to suit your site and even the bubble messages can be changed to suit your site.

New Screen Shot

Take out this part of the old code and replace it with the code below....Hope you enjoy :-)

li.message {
-moz-box-shadow: 0px 0px 11px #000000;
-webkit-box-shadow: 0px 0px 11px #000000;
box-shadow: 0px 0px 11px #000000;
}
li.message {
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
padding: 6px;
background: -moz-linear-gradient(center top, #2E9AFE 29%,#ffffff 100%,#000000 0%,#000000 0%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.29, #2E9AFE),color-stop(1, #ffffff),color-stop(0, #000000),color-stop(0, #000000));
}

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • CSS update !!

  • Very nice work, my friend!

  • Thanks Tj :-)  and Deb this is the code for the message border radius& gradient , this works fine on my test site and my live site, so not sure whats happening on yours although i know you always have more than 1 thing going on  :-) Try moving this code top a different section in you css, I know you will work it out :-)

    li.message {
    -moz-border-radius: 50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
    padding: 1px;
    background: -moz-linear-gradient(center top, #1fadd1 3%,#ffffff 89%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #1fadd1),color-stop(0.89, #ffffff));
    }

  • Update 2 for the new Chat Box hope you like it :-)

  • Excellent!! I'm using version two right now... I'd like to make the blue headers on main page chat yellow or red, which code changes that color? Thank you. This TIP is excellent. :)

    • Hi Damien, i'm glad you like it, you can customize the sound file if you would like it to sound more like the iPhone :-) here is the code you need just change the

      #31cde8 to the colour of your choice

      div.xg_chatBar.xg_titleBar.xg_theme-ningbar-bc.xg_theme-ningbar-c {
      border:groove 5px #31cde8;
      -moz-border-radius-topleft: 15px;
      -moz-border-radius-topright:15px;
      -moz-border-radius-bottomleft:5px;
      -moz-border-radius-bottomright:0px;
      -webkit-border-top-left-radius:15px;
      -webkit-border-top-right-radius:15px;
      -webkit-border-bottom-left-radius:5px;
      -webkit-border-bottom-right-radius:0px;
      border-top-left-radius:15px;
      border-top-right-radius:15px;
      border-bottom-left-radius:5px;
      border-bottom-right-radius:5px;
      }

  • The sound is changed?? I didn't notice!
    Had no idea you could change the sound this way too..


    Is there any way you could do this for the sound of a camera taking a picture? You know, the signature sound everyone knows. :) Being a photography social network, this would be awesome for me!

    So would I find the sound file, and then link to it inside your code? Where would I find the sound file reference? Thanks again!

    • Hi Damien, Go to 

      Settings

      Features

      Chat

      choose file and upload your sound file.

    • I just sent you the link for the sound file you needed :-)

      • amazing!! Thank you so much Dave! I appreciate your TIP and your help! I have it all working perfectly now! :)

This reply was deleted.

Search the Creators Network

Latest Activity

Scott Bishop replied to David Carr's discussion Being a Ning Network could ruin the deal
"At one point I was going to move over to WP with the Buddypress plug-in. After looking hard at budd…"
23 minutes ago
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I didn't stop using 3.0 because of this - I really liked the platforms direction - I left because t…"
1 hour ago
Kos replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"It's been fine if you didn't need that ability.  I love my 3.0"
2 hours ago
Kevin Acosta replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"YIKES! having never converted over from 2.0, I never knew that the video feature was not available…"
2 hours ago
Bizz ( John ) replied to Bizz ( John )'s discussion Make Your Videos In The New Video Feature Responsive ( updated: 30-03-17 )
"Just updated this code 30-03-17"
10 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for speaking to them and yes I do agree that it is the correct way to use existing classes l…"
11 hours ago
Bizz ( John ) replied to Bizz ( John )'s discussion Ning- Your design studio widget images are not loading
"Hi Kyryl
Thanks for the reply and you are most welcome about the bugs. I have been using Ning for o…"
11 hours ago
Kyryl_Ning_Support replied to Bizz ( John )'s discussion Ning- Your design studio widget images are not loading
"Hi John,
Just checked the labels on my network as well, and as I see they are missing as well. So I…"
13 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
You shouldn't have, but I should admit that it will be easier for the management to look t…"
14 hours ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"thx, kos! :)"
14 hours ago
Tony Rosa is now a member of Ning Creators Network
14 hours ago
Kos replied to Dan Porter's discussion Multiple Group Hubs
"Beatriz if you need something special designed beyond the ordinary, I would recommend you post your…"
23 hours ago
Garfield Archivist replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thank you. I appreciate the response and understand you needed to discuss with developers.
I find i…"
23 hours ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"Hello.
I would like to know how this feature is done or which creator could help me.
Thx!!"
yesterday
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks Pat :-)
Yes it is a nice addition but I do wish a little more QA was done before releasing f…"
yesterday
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I have re-uploaded this video so you can see it showing the green screen in the list page and also…"
yesterday
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for the reply Kyryl. I have addressed all the issues in a single post for you to look at her…"
yesterday
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Great addition Ning Team and I appreciate Bizz John taking the time to jump in and assist in findin…"
yesterday
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi Daniel,
We do apologise for the inconveniences at this moment developers are working under the i…"
yesterday
More…