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

How To Get Your Avatar In The Chat - UPDATED 07/24/09
This will get the avatars (both yours and theirs) in the lower right hand corner. If anyone can get it into the middle of the balloon please share how. For anyone who may have done this before the update, I've placed a ">" on the steps you'll need to do. For everyone else follow the tut like normal. Also, I'd suggest the gradient in the chat balloons all fading to one side. Looks much better that way ;-)
Attachment 21700

You will need to have your Pre rooted. Also, don't forget to back up everything you touch.

First step is to type:

Code

cd /usr/palm/applications/com.palm.app.messaging/stylesheets

then:

Code

sudo vi messaging.css

>Starting at line 139 you will see this:

Code

.chatRow img.avatar-location {
    margin-top: -18px;
}

.chatRow img.avatar-overlay {
    margin-top: -21px;
}

.chatRow .avatar-container {
    vertical-align: middle;
    display: inline-block;
}

>Change the margins in location and overlay so that they look like this:

Code

.chatRow img.avatar-location {                                                             
        margin-top: -39px;
}                                                                                                  
                       
.chatRow img.avatar-overlay {                                                                       
        margin-top: -42.5px;
}

>Now comment out the container:

Code

/*.chatRow .avatar-container {  
        vertical-align: middle;   
        display: inline-block;                                       
}*/

>Next, scroll down to line 662. You'll see something like this:

Code

.my-chat .chat-balloon-wrapper, 
.their-chat .chat-balloon-wrapper {
  padding: 1px 0;
  font-size: 18px;
  word-wrap: break-word !important;
}

>Add

Code

padding-right: 40px;

Code

.my-chat .chat-balloon-wrapper,            
.their-chat .chat-balloon-wrapper {                                                                 
  padding: 1px 0;                                                    
  font-size: 18px;                                                                            
  word-wrap: break-word !important;                                             
padding-right: 40px;                                                                                   
}

>Comment out line 668:

Code

/*.their-chat .chat-balloon-wrapper {                           
        padding-right: 8px ;}*/

On line 676 you will see this:

Code

/* Disabling MY avatar because we are not doing this for 1.0  2008-11-05*/
.my-chat .avatar-location,
.my-chat .avatar-overlay,
.my-chat .avatar-container {
    display: none;
    width: 40px;
    height: 40px;
}

Comment out

Code

 /*.my-chat .avatar-overlay,*/
/*.my-chat .avatar-container*/
/*display: none;*/

Now save: SHIFT zz or ESC :qw

Type:

Code

cd /usr/palm/applications/com.palm.app.messaging/app/controllers

Code

sudo vi chatview-assistant.js

Scroll down to line 1286 and remove the /'s. Should look like this:

Code

 msg.avatar = this.myAvatar || 'images/my-avatar.png';

Save: SHIFT zz or ESC :qw

Now you need to upload an avatar and find the image location

In terminal type:

Code

cd /usr/palm/applications/com.palm.app.messaging/images/

Code

sudo wget (url)

Code

sudo mv (filename of the avatar you just downloaded) my-avatar.png

Now type:

Code

sudo luna-send -n 1 palm://com.palm.applicationManager/rescan {}

You may need to do a full restart of the phone if after doing the above command does not add the avatar.


Change the Color of the Chat Balloons

The png's for the chat balloons are located here:

/usr/palm/applications/com.palm.app.messaging/images/chatview

Look for chat-balloon-right.png (your chat) and chat-balloon-left.png (friend's chat).

I have both images uploaded already.


Edit them using your favorite image editor.

Now uploaded them to where ever. Copy the image location.

Go to terminal and type:

Code

cd /usr/palm/applications/com.palm.app.messaging/images/chatview

Code

sudo wget (url)

Now you just need to change the name.

Type:

Code

sudo mv (filename of url) chat-balloon-right.png

Do the same for the left chat balloon.

Now type:

Code

sudo luna-send -n 1 palm://com.palm.applicationManager/rescan {}

Here are some pictures of edited chat balloons.

Attachment 21703Attachment 21700Attachment 21701Attachment 21702

Kudos goes out to DJPeterman for his help with the padding <3 and to halmo20 and lilmexx323 for help with the tut after the update.

Also thanks should go out to elryon for figuring out how to center avatars and to change the location avatar locations to the left, check out his mod on page 2.

Your path is wrong for the avatar :

"cd /usr/palm/applications/com.palm.app.messaging/images/chatview/"

Should be

"cd /usr/palm/applications/com.palm.app.messaging/images/"

Otherwise, it works awesomely! Thanks for finding that :) Can this be put in the wiki?

originally found here:

Code

http://forums.precentral.net/web-os-development/192840-how-get-your-avatar-chat-change-color-chat-balloons.html