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

Zachary Moonshine replied to Luke Jones's discussion I NEED!! to make money from my website soon
"than again i totally wouldnt feel right charging membership for what we can offer using ning 3 at t…"
45 minutes ago
Zachary Moonshine replied to Luke Jones's discussion I NEED!! to make money from my website soon
"i don't think we can charge for membership on 3 unless its a new box to check that i have not seen…"
58 minutes ago
Kos replied to John Bizley's discussion Another Variation Of My Clean Type Photo Page
"I haven't had time to comment but this is slick John.  Great job!  Found your code here http://thet…"
1 hour ago
Zachary Moonshine replied to Dan "JR" Goodman's discussion 3.0 vs 2.0
"plus being that it is a 3rd party chat that is actually iframed onto the ning3 site i think it has…"
2 hours ago
Zachary Moonshine replied to Dan "JR" Goodman's discussion 3.0 vs 2.0
"yes i use chatwing and it is great and that is the page that 90% of my traffic go to but is not for…"
2 hours ago
Kos replied to Dan "JR" Goodman's discussion 3.0 vs 2.0
"Chat though can be added using a 3rd party; as many things can."
3 hours ago
Zachary Moonshine replied to Dan "JR" Goodman's discussion 3.0 vs 2.0
"NING 3 looks great on mobile devices and the Blogs and forums is where it shines but it has no chat…"
4 hours ago
Zachary Moonshine replied to Mary Jane Peterson's discussion Power by ning
"Don't listen to me i still haven't had my coffee this morning on a more positive note i wonder is i…"
4 hours ago
Zachary Moonshine replied to FedMedic's discussion Sliders anyone?
"I am using Powr for free on my 3.0 site and it works great too also looks great and fast on mobile…"
4 hours ago
Zachary Moonshine replied to Mary Jane Peterson's discussion Power by ning
"I say screw em they don't care about you why care about them, what are they really gonna do stop ta…"
4 hours ago
Vander NG replied to Ning's discussion Update to Product Roadmap and Communication Changes
"I have been using Ning for 6 years, and yes, I love Ning from my day one, especially the support fr…"
18 hours ago
Kos replied to FedMedic's discussion Sliders anyone?
"POWR is cool, even the free. Diff sizes, diff. fonts, diff. displays and location...........etc."
yesterday
Fire-Tech replied to FedMedic's discussion Sliders anyone?
"Yeah, I know all too well my friend :)"
yesterday
FedMedic replied to FedMedic's discussion Sliders anyone?
"I just got back on here to read the suggestions. I'll let you know when I try Fire-Tech's suggestio…"
yesterday
FedMedic replied to FedMedic's discussion Sliders anyone?
"Hi Fire-Tech, I removed the code. Sorry it took me so long to get back here. Being in the fire busi…"
yesterday
Luke Jones replied to Luke Jones's discussion My member's can't use the Emoji's when their using their phones
"Ah right,will check then,thanks Kos :)"
yesterday
Kos replied to Luke Jones's discussion My member's can't use the Emoji's when their using their phones
"I would check w/them, then a/b mobile."
yesterday
Luke Jones replied to Luke Jones's discussion My member's can't use the Emoji's when their using their phones
"Thanks Kos :) I have comet chat, but I mean't when people are writing a private message and on comm…"
yesterday
Kos replied to Luke Jones's discussion My member's can't use the Emoji's when their using their phones
"I use "Cometchat" and while members have to manually type it in, they work.  idk a/b Chatabox.  Sor…"
yesterday
Rowald replied to Luke Jones's discussion Ning have finally got back to me!!! Lets throw a party :P
"We can not judge something is good from one perspective."
yesterday
More…