Chat Box New Look with Apple iPhone style messages

[dave]

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

}

[dave]

CSS update !!

[Debbie]

WoW!!!! Dave!  Love it! 

I tested this on my site but for some reason, I am not getting the rounded corners.  See my screenshot below.

Great job!!

[TJ @ jQueryHelp]

Very nice work, my friend!

[dave]

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

[dave]

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

[Damien Hannah]

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. :)

[dave]

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

[Damien Hannah]

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!

[dave]

Hi Damien, Go to 

Settings

Features

Chat

choose file and upload your sound file.

[dave]

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

[Damien Hannah]

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

[dave]

I'm glad you like it, You have a great weekend :-)