How To Get Your Avatar In The Chat & Change the Color of the Chat Balloons

[halmo20]

Thanks!! Worked like a charm!

I did have hell of time at first to get it to work... I did Sarah's original modification and had to manually restore css before applying your mods...

For some reason, commas were left in 3 different locations affecting my avatar location!!! Took me a while to debug..

Originally Posted by cellmonsters

Ok, so like you i wanted it to the left and since i usually play around with CSS for my websites i gave it another go.

here is all that i have on my css and how i got it to work just nicely. The changes i did are in RED Bold

line 644:
my-chat .message-container {
width 265px;
}

This one is a little bit below:

.my-chat .chat-balloon-wrapper {
padding-left: 40px;
word-wrap: break-word !important;
}

around line 688 or so.

.my-chat .avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
.my-chat .avatar-overlay {
left: 2px;
margin-top: 4px;
position: absolute;
}
.my-chat .avatar-container {
display: inline-block;
}

.my-chat .avatar {
width: 40px;
height: 40px;
}

Hope this helps ... it sure is working on mine.

Pic is below:

Originally Posted by MaSwaggSoSiQ

didnt work....

Look at your coding carefully and compare to cellmonster's.
I had some problems until I found 3 commas that didn't belong..

[MaSwaggSoSiQ]

does cell monsters properly align both avatars?

[MaSwaggSoSiQ]

finally got everything squared away... i had to redo sarah mods manually also...

[MaSwaggSoSiQ]

im using the full color bubbles ( with no fadeout ) posted on the previous page and i noticed my avatar is a little to close to the chat bubble and when someone sends me a long text some letters tend to leak out their bubble. anything i can change in the coding to fix this?

[sarah peterman]

This has nothing to do with the bubbles,but I wanted to upload this icon here, as I don't want to create a new thread for one picture.

icon1.png

If you want to use it, you just need to place it in /usr/palm/applications/com.palm.app.messaging directory then rename it to icon.png. You will have to reboot your phone.

[halmo20]

Just FYI:
After applying cellmonster's codes, I noticed that my avatar was shifted to the left and the my chat balloon was noticeably shorter than 'their' chat balloon.
I modified the code as below (red)and it aligns better. I still can't get the balloon all the way to the right (I think it's still 5 pixels shorter.) But when I put 280 instead of 275, the avatar shifts down. I tested with 278 still doesn't work.

line 644:
my-chat .message-container {
width 275px;
}

This one is a little bit below:

.my-chat .chat-balloon-wrapper {
padding-left: 40px;
word-wrap: break-word !important;
}

around line 688 or so.

.my-chat .avatar-location {
left: 12px;
position: absolute;
margin: 13px 12px 0px 0px;
}
.my-chat .avatar-overlay {
left: 8px;
margin-top: 4px;
position: absolute;
}
.my-chat .avatar-container {
display: inline-block;
}

.my-chat .avatar {
width: 40px;
height: 40px;
}

[as4life]

Any way to change the size of the balloons in the conversations page? (page when you first open messaging app)

[sarah peterman]

Originally Posted by as4life

Any way to change the size of the balloons in the conversations page? (page when you first open messaging app)

Sorry, I'm not sure where you change it. I took a look, and this is the closest that I found.

.chat-entry .chat-balloon {
	min-height: 26px;

Has anyone found a way to change the background of this app? I have searched high and low. There is no image and nothing in css for the background.

[as4life]

Originally Posted by sarah peterman

Sorry, I'm not sure where you change it. I took a look, and this is the closest that I found.

.chat-entry .chat-balloon {
	min-height: 26px;

Has anyone found a way to change the background of this app? I have searched high and low. There is no image and nothing in css for the background.

thanks. all i had to add was width size and was able to change it, i couldn't find the background image

[sarah peterman]

Originally Posted by as4life

thanks. all i had to add was width size and was able to change it, i couldn't find the background image

Great, glad that worked ;-). Thank you for looking.

Edited to add: The background seems to be handled by a primary css, as the calendar, chat, and most native apps have the same color and theme.

[cellmonsters]

Originally Posted by sarah peterman

Great, glad that worked ;-). Thank you for looking.

Edited to add: The background seems to be handled by a primary css, as the calendar, chat, and most native apps have the same color and theme.

Never thought of that.. adding a background.. i will look into this.. im sure its all that needs to be done is add the additional code to the css or i will see what i can find.

[cellmonsters]

Originally Posted by halmo20

Just FYI:
After applying cellmonster's codes, I noticed that my avatar was shifted to the left and the my chat balloon was noticeably shorter than 'their' chat balloon.
I modified the code as below (red)and it aligns better. I still can't get the balloon all the way to the right (I think it's still 5 pixels shorter.) But when I put 280 instead of 275, the avatar shifts down. I tested with 278 still doesn't work.

line 644:
my-chat .message-container {
width 275px;
}

This one is a little bit below:

.my-chat .chat-balloon-wrapper {
padding-left: 40px;
word-wrap: break-word !important;
}

around line 688 or so.

.my-chat .avatar-location {
left: 12px;
position: absolute;
margin: 13px 12px 0px 0px;
}
.my-chat .avatar-overlay {
left: 8px;
margin-top: 4px;
position: absolute;
}
.my-chat .avatar-container {
display: inline-block;
}

.my-chat .avatar {
width: 40px;
height: 40px;
}

Hey Thanks for the oversight heheh. i actually didnt even notice it wasnt extending as much as their chat.. talk about much needed glasses, im just happy it didnt mess anything up on the phone hehehe..

some have asked for the background of the app.. im sure this is very well possible so i will look at the css within dreamweaver and im sure i will pinpoint something.

[MaSwaggSoSiQ]

Originally Posted by as4life

thanks. all i had to add was width size and was able to change it, i couldn't find the background image

do u have a screenshot of ur change? im curious as to what exactly u were trying to do and if it actually looks better...

[as4life]

Originally Posted by MaSwaggSoSiQ

do u have a screenshot of ur change? im curious as to what exactly u were trying to do and if it actually looks better...

I'm trying to get an ichat look to it. Here is where i had to change the chat balloon size




Here's another image:

[MaSwaggSoSiQ]

as4life... anyway u can provide the chat balloon pix for download and maybe an orange color one also?

[cellmonsters]

Originally Posted by as4life

I'm trying to get an ichat look to it. Here is where i had to change the chat balloon size

So for those that have been interested in adding a background to the chat area, i think i am close. ofcourse there are more codes i may have to look at as the background is NOT consistant.

here is the code i modified for the test and screenshot below:

Original code:

.chat-entry {
min-height: auto;
background: none;
}


Code modified:
.chat-entry {
min-height: auto;
background-image: url(../images/chatview/balloon_blue.png)
background-repeat: repeat;
}


Now, the end result was that the background was coming up in the chat area.. although it was not consistant. seems liek when you take a bit of time to reply, the little timer-stamp that appears on your message when you have had a few minutes without replying break the image a bit. aside from that when you send a message, your balloon may appear with no background until the other person replies.. it seems like it does not apply the background until a new message comes in either from you or the other person. As for the height, i am sure if i play around with it i can make it work.. im just a bit drained to continue testing, but if anyone would like to this is one of the codes you may want to look at.

I was also looking at :

.chat-entry.historyRow {
min-height: 80px;
}

this code is right under the .chat-entry. What i believe is that if i add the same background code to this line as well, the whole chat area would have the background instead of the background appearing when a new message comes up.

so here is a screen shot below of how it looks like.. this is testing only.

[as4life]

Originally Posted by MaSwaggSoSiQ

as4life... anyway u can provide the chat balloon pix for download and maybe an orange color one also?

left or right or both? also, do you prefer black outline?

[MaSwaggSoSiQ]

Originally Posted by as4life

left or right or both? also, do you prefer black outline?

both, and whichever u think looks best..lol and can somebody please help me. i did the change listed above on this page but now " their " chat avatar is overlapping some of their text. anybody know the perfect script to have the avatars and the comment bubbles and text to all be perfectly aligned....been at this for 3 days now and still havent got it right...

[sarah peterman]

Originally Posted by cellmonsters

So for those that have been interested in adding a background to the chat area, i think i am close. ofcourse there are more codes i may have to look at as the background is NOT consistant.

here is the code i modified for the test and screenshot below:

Awesome, I've has success adding this to the top of the css.

body.wallpaper,
body.palm-default {
  background: url(../images/background.png) 0 0 fixed;

}

You can also add

background: color here;

I love that there is so many ways of doing things in css.

messaging_2009-22-07_105249.jpg

So this is what I have so far... I need to step away from the phone and the computer. I had dreams about it last night. :-O

[sarah peterman]

Would anyone know how to make the background transparent?