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

Luke Jones replied to Luke Jones's discussion Comet chat are genuinely awesome
"Yep :) , it is aha :) O don't forget comet chat are having the apps in 3 weeks time so you can have…"
1 hour ago
Kwan Yin replied to Luke Jones's discussion Comet chat are genuinely awesome
"Yes, I'm planning to get the highest package as well, video & audio chat in HD sounds fantastic!
My…"
1 hour ago
Leyda Ramirez replied to Lorenzo M. Oliver's discussion Problemas con la visualización de las imágenes in Ning Networks en español
"Gracias! Me funcionó perfecto"
1 hour ago
Luke Jones replied to Luke Jones's discussion Comet chat are genuinely awesome
":) awesome :) ah right :) Aha :) , Your absolutely right, comet chat are Fantastic :) I'm going be…"
1 hour ago
Kwan Yin replied to Luke Jones's discussion Comet chat are genuinely awesome
"Thanks for the tip! I'm currently doing a revamp of my Ning 3.0 site and I'm going to add CometChat…"
1 hour ago
John Bizley replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"Thanks George and your most welcome for the codes. I agree it probably could be compiled better, I…"
3 hours ago
George H. Compton IV replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube, Slideshare & Vimeo Videos"
"That sounds sweet John, keep up the awesome work :-)And thank you for the compliment. :)"
5 hours ago
George H. Compton IV replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"Good morning John. :-) This is beautiful, thank you for sharing the codes.  I'm still planning on p…"
5 hours ago
John Bizley replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"Your most welcome and thankyou :-)"
5 hours ago
Edie2k2 replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"You are a dear, dear man John. Thank you!!"
17 hours ago
John Bizley replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube, Slideshare & Vimeo Videos"
"This is a really great piece of code for your videos, I had it on an old site but now am using it f…"
17 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP N3) Fluid network enhancements for your profileCoverArea img, network header img, group Header image & Social Channels player
"Update 5-23-15, My Fluid Social Channels Video player now sports VIMEO
Sorry I didn't add VIMEO ear…"
18 hours ago
John Bizley replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"After a lot of testing all the code and setup for this is now available. It will work accross all t…"
19 hours ago
George H. Compton IV replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"Update I added a version for Ning 3.0.. This code does not affect Nings mobile sub-tab arrows."
19 hours ago
George H. Compton IV replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"Thank you Dave, you're so very welcome. :-)"
yesterday
dave replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"Thanks George for sharing this Tip, they work and look great :-) very nice piece of code :-) You've…"
yesterday
George H. Compton IV replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"Thank you for the compliment JFarrow. :)"
yesterday
JFarrow replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"sweet work and great idea George!"
yesterday
Luke Jones replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
":) that's fair enough aha :)I'm going stick with testing it on scratchpad for now,until I have more…"
yesterday
George H. Compton IV replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"A lot of the codes I right are customizing Ning's pages and their HTML, I'm not going to copy their…"
yesterday
More…