|
|
webOS Nation Forums > webOS apps and software > webOS development > How To Get Your Avatar In The Chat & Change the Color of the Chat Balloons
1 2 3 4 5 6 7 8 9 10 11 ... Last
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..
I had some problems until I found 3 commas that didn't belong..
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:
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.didnt work....
I had some problems until I found 3 commas that didn't belong..
does cell monsters properly align both avatars?
finally got everything squared away... i had to redo sarah mods manually also...
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?
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.
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.
Attached:
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;
}
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;
}
Any way to change the size of the balloons in the conversations page? (page when you first open messaging app)
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.Any way to change the size of the balloons in the conversations page? (page when you first open messaging app)
[CODE].chat-entry .chat-balloon {
min-height: 26px;[/CODE]
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.
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.
[CODE].chat-entry .chat-balloon {
min-height: 26px;[/CODE]
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 imageSorry, I'm not sure where you change it. I took a look, and this is the closest that I found.
[CODE].chat-entry .chat-balloon {
min-height: 26px;[/CODE]
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.
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.thanks. all i had to add was width size and was able to change it, i couldn't find the background image
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.
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.
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.
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;
}
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.
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...thanks. all i had to add was width size and was able to change it, i couldn't find the background image
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 sizedo u have a screenshot of ur change? im curious as to what exactly u were trying to do and if it actually looks better...
Here's another image:
as4life... anyway u can provide the chat balloon pix for download and maybe an orange color one also?
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.I'm trying to get an ichat look to it. Here is where i had to change the chat balloon size
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.
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?as4life... anyway u can provide the chat balloon pix for download and maybe an orange color one also?
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...left or right or both? also, do you prefer black outline?
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.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:
[CODE]body.wallpaper,
body.palm-default {
background: url(../images/background.png) 0 0 fixed;
} [/CODE]
You can also add [CODE]background: color here;[/CODE]
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
Attached:
Would anyone know how to make the background transparent?
1 2 3 4 5 6
7 8 9 10 11
...
Last
webOS Nation Forums > webOS apps and software > webOS development > How To Get Your Avatar In The Chat & Change the Color of the Chat Balloons
