|
|
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 ... Last
Originally Posted by elryon:
I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
Can you post a screenshot? I reverted back to the original messaging.css file and followed your edits and now my pictures aren't in the bubble (it overlaps it)I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
also, how do you move my avator to the left? Or better yet have the whole messaging interface look like ichat?
nvm i figured out that my image is looking like that because of the backround
Originally Posted by as4life:
Can you post a screenshot? I reverted back to the original messaging.css file and followed your edits and now my pictures aren't in the bubble (it overlaps it)
make sure it doesnt contain the commas after the lines... here's a screenshot: Can you post a screenshot? I reverted back to the original messaging.css file and followed your edits and now my pictures aren't in the bubble (it overlaps it)
screenshot.jpg
I'll go back over and see if I made anymore changes I might have missed.
Attached:
Originally Posted by as4life:
also, how do you move my avator to the left? Or better yet have the whole messaging interface look like ichat?
not sure about ichat... never used it. but you can move the avatar to the left with a few changes.. did you want both avatars or just yours on the left?also, how do you move my avator to the left? Or better yet have the whole messaging interface look like ichat?
first change starting around line 133:
img.avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
img.avatar-overlay {
left: 2px;
margin-top: 10px;
position: absolute;
}
then around line 643:
.their-chat .message-container {
width: 265px;
}
.my-chat .message-container {
width: 265px;
}
and finally around 661:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
.their-chat .chat-balloon-wrapper {
padding: 1px 0;
font-size: 18px;
word-wrap: break-word !important;
}
.their-chat .chat-balloon-wrapper {
padding-left: 8px;
here's a screenshot... screenshot2.jpg
Attached:
Originally Posted by elryon:
I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
Nice job, thank you. :-)I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
Originally Posted by sarah peterman:
Nice job, thank you. :-)
someone wouldnt happen to have a copy of the original messaging.css file I could download? I never backed it up and have done a lot of tinkering now...Nice job, thank you. :-)
please post a link and I can wget it directly to the emulator.
Originally Posted by elryon:
someone wouldnt happen to have a copy of the original messaging.css file I could download? I never backed it up and have done a lot of tinkering now...
please post a link and I can wget it directly to the emulator.
Here is the link to chatview-assistant.js and messaging.csssomeone wouldnt happen to have a copy of the original messaging.css file I could download? I never backed it up and have done a lot of tinkering now...
please post a link and I can wget it directly to the emulator.
Here's some more...
chat-view-greypeachleft.pngchat-view-greypeach.png
chat-view-pinkleft.pngchat-view-pink.png
chat-view-pinktipleft.pngchat-view-pinktip.png
chat-view-purpleleft.pngchat-view-purple.png
chat-view-greypeachleft.pngchat-view-greypeach.png
chat-view-pinkleft.pngchat-view-pink.png
chat-view-pinktipleft.pngchat-view-pinktip.png
chat-view-purpleleft.pngchat-view-purple.png
Attached:
Originally Posted by elryon:
not sure about ichat... never used it. but you can move the avatar to the left with a few changes.. did you want both avatars or just yours on the left?
first change starting around line 133:
img.avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
img.avatar-overlay {
left: 2px;
margin-top: 10px;
position: absolute;
}
then around line 643:
.their-chat .message-container {
width: 265px;
}
.my-chat .message-container {
width: 265px;
}
and finally around 661:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
.their-chat .chat-balloon-wrapper {
padding: 1px 0;
font-size: 18px;
word-wrap: break-word !important;
}
.their-chat .chat-balloon-wrapper {
padding-left: 8px;
here's a screenshot... Attachment 22638
I just want my avatars to move to the leftnot sure about ichat... never used it. but you can move the avatar to the left with a few changes.. did you want both avatars or just yours on the left?
first change starting around line 133:
img.avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
img.avatar-overlay {
left: 2px;
margin-top: 10px;
position: absolute;
}
then around line 643:
.their-chat .message-container {
width: 265px;
}
.my-chat .message-container {
width: 265px;
}
and finally around 661:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
.their-chat .chat-balloon-wrapper {
padding: 1px 0;
font-size: 18px;
word-wrap: break-word !important;
}
.their-chat .chat-balloon-wrapper {
padding-left: 8px;
here's a screenshot... Attachment 22638
Originally Posted by as4life:
I just want my avatars to move to the left
that will take a little more time.. but from what I've seen, it can be done. Right now I'm trying to load the original .css file but cant seem to figure out how to save it on the emulator and replace the one there... any help would be thanked.I just want my avatars to move to the left
Originally Posted by elryon:
that will take a little more time.. but from what I've seen, it can be done. Right now I'm trying to load the original .css file but cant seem to figure out how to save it on the emulator and replace the one there... any help would be thanked.
Sorry, I won't be of any help with the emulator. :-/that will take a little more time.. but from what I've seen, it can be done. Right now I'm trying to load the original .css file but cant seem to figure out how to save it on the emulator and replace the one there... any help would be thanked.
Originally Posted by elryon:
I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
so if i do this does that mean i have to go through the whole process again or can i make the noted changes, save and exit?I got the avatar to center and be wrapped correctly...
the only changes needed to the original messaging.css are:
line 644:
my-chat .message-container {
width 255px;
}
and line 676:
/* 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: inline-block;
width: 40px;
height: 40px;
}
then proceed with adding your avatar pic as before.
Originally Posted by MaSwaggSoSiQ:
so if i do this does that mean i have to go through the whole process again or can i make the noted changes, save and exit?
you should be able to just make the changes, save and exit. If your starting with an already modified file as per the previous instructions, you may want to undo any previous changes and only have the listed ones.so if i do this does that mean i have to go through the whole process again or can i make the noted changes, save and exit?
so basically if i followed sarahs way i need to undo all of those changes before i apply the new ones to center the avatar?
yes, I believe so.. or if you backed up or original messaging.css just restore that and do the changes I listed. That should do it, I'm testing right now.
yes... it works from the original .css file just making the changes I listed. You will still need to make the rest of the changes to the other file for the image..
yes... it works from the original .css file just making the changes I listed. You will still need to make the rest of the changes to the other file for the image..
so far this is what i have. Any way to align it properly?
[QUOTE=as4life;1761708]so far this is what i have. Any way to align it properly?
try editing this:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
changing the padding should help. It did that to me the first time I tried it.
try editing this:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
changing the padding should help. It did that to me the first time I tried it.
[QUOTE=elryon;1761720]
Originally Posted by as4life:
so far this is what i have. Any way to align it properly?
try editing this:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
changing the padding should help. It did that to me the first time I tried it.
I already edited the above to what you have.so far this is what i have. Any way to align it properly?
try editing this:
.my-chat .chat-balloon-wrapper {
padding-left: 40px;
}
changing the padding should help. It did that to me the first time I tried it.
also around line 676, my code looks like this:
.my-chat .avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
.my-chat .avatar-overlay {
left: 2px;
margin-top: 10px;
position: absolute;
}
.my-chat .avatar-container {
display: inline-block;
width: 40px;
height: 40px;
}
1 2 3
4 5 6 7 8
...
Last
.my-chat .avatar-location {
left: 6px;
position: absolute;
margin: 13px 12px 0px 0px;
}
.my-chat .avatar-overlay {
left: 2px;
margin-top: 10px;
position: absolute;
}
.my-chat .avatar-container {
display: inline-block;
width: 40px;
height: 40px;
}
webOS Nation Forums > webOS apps and software > webOS development > How To Get Your Avatar In The Chat & Change the Color of the Chat Balloons
