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

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 Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • CSS update !!

  • Very nice work, my friend! smile.gif

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

    3212683?profile=original

  • 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.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels