maemo.org - Talk

maemo.org - Talk (https://talk.maemo.org/index.php)
-   Maemo 5 / Fremantle (https://talk.maemo.org/forumdisplay.php?f=40)
-   -   Customize N900 Conversations (https://talk.maemo.org/showthread.php?t=36618)

iscio 2011-03-05 21:48

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Harick (Post 961411)
it's me again, hi

well, couple of modifications

first, new layout with both, self and other's avatar on left

second, now you can choose from a bunch of nice bubbles color and layouts to make your own custom iphony conversation.

explanation:

it's kind of complicated, but like they say, there is no easy path to heaven.

first choose a BG, there is light and black background, if you want another just edit the body background-color in the css file

second, choose a layout, there are 4 differents (so far)
- both sides (left for self, right for other)
- both side with avatars
- left side (both messages are on left side)
- left side with avatars

now you got 3 files (html, css, and js) copy them into the /usr/share/rtcom-messaging-ui/html

third, choose from the Bubbles folder a color for your bubble (from self folder) and a color for the other bubble (others folder)

finaly, copy the png images you choose into the /usr/share/rtcom-messaging-ui/html folder

and thats it, you have a custom iphone-like conversation



any bug/question just ask


thank you for you work. it is beautifull

maemo55 2011-03-06 14:07

Re: Customize N900 Conversations
 
1 Attachment(s)
Quote:

Originally Posted by Harick (Post 961411)
it's me again, hi

well, couple of modifications

first, new layout with both, self and other's avatar on left

second, now you can choose from a bunch of nice bubbles color and layouts to make your own custom iphony conversation.

explanation:

it's kind of complicated, but like they say, there is no easy path to heaven.

first choose a BG, there is light and black background, if you want another just edit the body background-color in the css file

second, choose a layout, there are 4 differents (so far)
- both sides (left for self, right for other)
- both side with avatars
- left side (both messages are on left side)
- left side with avatars

now you got 3 files (html, css, and js) copy them into the /usr/share/rtcom-messaging-ui/html

third, choose from the Bubbles folder a color for your bubble (from self folder) and a color for the other bubble (others folder)

finaly, copy the png images you choose into the /usr/share/rtcom-messaging-ui/html folder

and thats it, you have a custom iphone-like conversation



any bug/question just ask

hi

i found a bug in your themes

when my messege sent

in the details sent message there is not any information about delivered message

sorry my english is bad

please see this screenshot

Changegames 2011-03-06 14:36

Re: Customize N900 Conversations
 
i like the iphonish theme but how can i modify the spaces between bubbles for me i feel like there so many wasted space, i draw a red line to show you where i want to close the gap...http://i.imgur.com/p83Rc.jpg

jo21 2011-03-06 22:46

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Changegames (Post 961839)
i like the iphonish theme but how can i modify the spaces between bubbles for me i feel like there so many wasted space, i draw a red line to show you where i want to close the gap...http://i.imgur.com/p83Rc.jpg

where did u find that one ? x.x

Harick 2011-03-06 22:58

Re: Customize N900 Conversations
 
Quote:

Originally Posted by maemo55 (Post 961823)
hi

i found a bug in your themes

when my messege sent

in the details sent message there is not any information about delivered message

sorry my english is bad

please see this screenshot


i'm sorry, i can't reproduce your bug, it shows perfectly in my phone, i'm afraid it's a singular problem, maybe a theme, did you try with another theme? or another sms layout?


Quote:

Originally Posted by Changegames (Post 961839)
i like the iphonish theme but how can i modify the spaces between bubbles for me i feel like there so many wasted space, i draw a red line to show you where i want to close the gap...http://i.imgur.com/p83Rc.jpg


you have 2 spaces there, to reduce space 1 (over timestamp), you have to add a negative margin-bottom to div.MessageSelf, and subtract the same amount in the already negative margin of div.MessageOther

(i know, it's not the best way of doing it, but i'm just learning css and i'm always kind of messy :P)

example:
Code:

div.MessageSelf {
  vertical-align:middle;
  padding-bottom: 8px;
  clear:          both;
  display:        block;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom:-18px;

}

div.MessageOther {
        float:right;
  vertical-align:middle;
  clear:          both;
  display:        block;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom:-82px; /*      -64px + (-18px)      */
}

and space number two (below timestamp) can be reduced by adding a negative margin to div.MessageRightSelf and div.MessageRightOther, something like this

Code:

div.MessageRightSelf {
  margin-left:106px;
  white-space: nowrap;
  text-align: left;
  display: block;
  width:auto;
  margin-bottom:-18px;

}


div.MessageRightOther {
  white-space: nowrap;
  text-align: right;
  margin-right:106px;
  display: block;
  width:auto;
  margin-bottom:-18px;

}

if you go below -18px, the timestamp will be inside the bubble

i don't know if it's clear, but i'm not good at explaining (and my english is not the best), but if you want, give me the layout you want to use, and i'll reduce the spaces for you

jo21 2011-03-06 23:44

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Harick (Post 962069)
i'm sorry, i can't reproduce your bug, it shows perfectly in my phone, i'm afraid it's a singular problem, maybe a theme, did you try with another theme? or another sms layout?





you have 2 spaces there, to reduce space 1 (over timestamp), you have to add a negative margin-bottom to div.MessageSelf, and subtract the same amount in the already negative margin of div.MessageOther

(i know, it's not the best way of doing it, but i'm just learning css and i'm always kind of messy :P)

example:
Code:

div.MessageSelf {
  vertical-align:middle;
  padding-bottom: 8px;
  clear:          both;
  display:        block;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom:-18px;

}

div.MessageOther {
        float:right;
  vertical-align:middle;
  clear:          both;
  display:        block;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom:-82px; /*      -64px + (-18px)      */
}

and space number two (below timestamp) can be reduced by adding a negative margin to div.MessageRightSelf and div.MessageRightOther, something like this

Code:

div.MessageRightSelf {
  margin-left:106px;
  white-space: nowrap;
  text-align: left;
  display: block;
  width:auto;
  margin-bottom:-18px;

}


div.MessageRightOther {
  white-space: nowrap;
  text-align: right;
  margin-right:106px;
  display: block;
  width:auto;
  margin-bottom:-18px;

}

if you go below -18px, the timestamp will be inside the bubble

i don't know if it's clear, but i'm not good at explaining (and my english is not the best), but if you want, give me the layout you want to use, and i'll reduce the spaces for you

abit confusing.. i am trying to make a standard version with potrait support. all avatar on the left. dark background
Me=green bubble
they=blue bubble
think u could help me?

godofwar424 2011-03-07 00:15

Re: Customize N900 Conversations
 
1 Attachment(s)
Quote:

Originally Posted by Harick (Post 961411)
it's me again, hi

well, couple of modifications

first, new layout with both, self and other's avatar on left

second, now you can choose from a bunch of nice bubbles color and layouts to make your own custom iphony conversation.

explanation:

it's kind of complicated, but like they say, there is no easy path to heaven.

first choose a BG, there is light and black background, if you want another just edit the body background-color in the css file

second, choose a layout, there are 4 differents (so far)
- both sides (left for self, right for other)
- both side with avatars
- left side (both messages are on left side)
- left side with avatars

now you got 3 files (html, css, and js) copy them into the /usr/share/rtcom-messaging-ui/html

third, choose from the Bubbles folder a color for your bubble (from self folder) and a color for the other bubble (others folder)

finaly, copy the png images you choose into the /usr/share/rtcom-messaging-ui/html folder

and thats it, you have a custom iphone-like conversation



any bug/question just ask

Mate,

I have found a bug with the avatar placement in portrait mode.

Basically, as shown in the picture. If i type a longer message, my avatar appears above the message on the left instead of at the bottom left of the bubble.

Hope you get what I mean :P


P.s. This bug DOES NOT apply for the person I am texting. Their avatar is always placed correctly.

ejasmudar 2011-03-07 09:31

Re: Customize N900 Conversations
 
Guys, a lot of new themes seems to have been uploaded here in the past few days. Please update the wiki.
All the themes need more descriptive names; right now, it is all Conversation theme1, theme 2, etc. Also, maybe a short description/screenshot?
Also, if somebody could add how-to's in the wiki about changing own name, adding avatar, realigning the avatars, adjust spacing, etc I think it would help a lot of users. I am still confused an experimenting on a lot of thins with the css and html files and this would be helpful.

Changegames 2011-03-07 10:30

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Harick (Post 962069)

i don't know if it's clear, but i'm not good at explaining (and my english is not the best), but if you want, give me the layout you want to use, and i'll reduce the spaces for you

thanks harick, i just want to close the gap i like the way the iphone theme is because its easy to read...

godofwar424 2011-03-07 10:31

Re: Customize N900 Conversations
 
Quote:

Originally Posted by ejasmudar (Post 962337)
Guys, a lot of new themes seems to have been uploaded here in the past few days. Please update the wiki.
All the themes need more descriptive names; right now, it is all Conversation theme1, theme 2, etc. Also, maybe a short description/screenshot?
Also, if somebody could add how-to's in the wiki about changing own name, adding avatar, realigning the avatars, adjust spacing, etc I think it would help a lot of users. I am still confused an experimenting on a lot of thins with the css and html files and this would be helpful.

Im not promising anything, but I will try and update the wiki so it is much more useful to newbies as well as linux veterans :)

As for screenshots I will try and find some for each theme and then attach them as well as making some more interesting names for them :P

If anyone doesn't want me to edit their files then please let me know and Ill revert the changes :)


All times are GMT. The time now is 15:39.

vBulletin® Version 3.8.8