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)

Schturman 2010-02-13 15:12

Re: Customize N900 Conversations
 
I have another little problem with avatar borders in the SMS conversation... It's only on "Other" avatar...
See this picture:

http://i50.tinypic.com/7103u9.png

How I can fix this ?

I see the avatar block and it's look Ok (normal)

Code:

div.Avatar {
  width: 64px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 64px;
  height:64px;
  -moz-border-radius: 10px;
}

img.MessagePresence {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}


agentsmith 2010-02-13 19:27

Re: Customize N900 Conversations
 
I tried to change my avatar and could not. I previously moved one to the html/ folder and it worked. Tried to copy the previous one that did work back and still no luck. Any suggestions?

b666m 2010-02-14 02:27

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Schturman (Post 524742)
I have another little problem with avatar borders in the SMS conversation... It's only on "Other" avatar...
See this picture:

http://i50.tinypic.com/7103u9.png

How I can fix this ?

I see the avatar block and it's look Ok (normal)

Code:

div.Avatar {
  width: 64px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 64px;
  height:64px;
  -moz-border-radius: 10px;
}

img.MessagePresence {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}


change width and height from 64px to 60px ^^
somehow resizing the image doesn't work in conversation-view...

SR90 2010-02-14 13:23

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 525483)
change width and height from 64px to 60px ^^
somehow resizing the image doesn't work in conversation-view...

Hello , I have the same problem , How do I have to change the size ?

is it possible to customize the size on the n900 itself ? do I have to use xterminal ?

It would be nice if you could help me to fix this problem , cheers :D

b666m 2010-02-14 14:36

Re: Customize N900 Conversations
 
Quote:

Originally Posted by SR90 (Post 525931)
Hello , I have the same problem , How do I have to change the size ?

the files you have to edit are stored in /usr/share/rtcom-messaging-ui/html/

there you have to edit the *SMSConversation*.css
three ways of doing that:
1. SSH root connection to pc.
2. copy the files from there to your MyDocs, connect via mass storage to your pc, edit the file on your pc, copy it back and finally move it into the html-folder (you have to be root for doing that)
3. gain root in xterm. open the css-file in xterm with vi (if you know how to handle it ^^) or install leafpad and open it with it.

you have to change:
Code:

div.Avatar {
  width: 64px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 64px;
  height:64px;
  -moz-border-radius: 10px;
}

to:
Code:

div.Avatar {
  width: 60px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 60px;
  height:60px;
  -moz-border-radius: 10px;
}

for further instructions on how to copy files with root rights from one point to another point or on how to ssh into your phone, please use the search located at top right on this page. ^^

SR90 2010-02-14 16:06

Re: Customize N900 Conversations
 
thanks for the response b666m , I have leafpad installed , how exactly do I have to dig out the files /usr/share/rtcom-messaging-ui/html/ on n900 and change the size to 60 ?
I have already searched , couldn't find how to find the file using xterminal and leafpad :(
Cheers .

b666m 2010-02-14 16:10

Re: Customize N900 Conversations
 
open xterm:
1. type "sudo gainroot"
2. type "leafpad MessagingWidgetsSMSConversation.css"
3. then change the three values from 64 to 60px and save the changes.
4. open up any sms conversation, close it and open it again to reload the layout. :)

SR90 2010-02-14 16:20

Re: Customize N900 Conversations
 
b666m , When I type "leafpad MessagingWidgetsSMSConversation.css" , I get a white page with no values and typos , is it normal ?

Is it possible to make the avatars bigger than 60 ? like 80 or even 100 ?
it would be nice to have a bigger one and then change it to the style you have already created in this thread , Is it also possible to change the layout of the conversation just by using xterminal and leafpad ? :)

b666m 2010-02-14 16:27

Re: Customize N900 Conversations
 
Quote:

Originally Posted by SR90 (Post 526086)
b666m , When I type "leafpad MessagingWidgetsSMSConversation.css" , I get a white page with no values and typos , is it normal ?

oh sorry... where's my brain today?!
forgot that you aren't in the correct folder.
"leafpad /usr/share/rtcom-messaging-ui/html/MessagingWidgetsSMSConversation.css"

Quote:

Is it possible to make the avatars bigger than 60 ? like 80 or even 100 ?
should be possible. resizing is also used in the single view but it doesn't work in the conversations. don't know why. (the current code with 64px should do this resizing but as you can see it doesn't work at all)

Quote:

Is it also possible to change the layout of the conversation just by using xterminal and leafpad ? :)
of course. it's just simple file editing. but it's way more comfortable to use a neat editor on your pc with expression highlighting. :)

SR90 2010-02-14 16:42

Re: Customize N900 Conversations
 
You are my hero , worked perfectly :D
by the way my " -moz-border-radius: 10px;" code is 6px , does it matter/do I have to change it to 10 ?

I'm going to change the conversation layout soon , thanks a lot once again , great to have you on board :)

b666m 2010-02-14 17:00

Re: Customize N900 Conversations
 
it's the radius of the avatar-corners.
for example:
make this value 30px and you'll have a circle as avatar ^^

SR90 2010-02-14 17:10

Re: Customize N900 Conversations
 
coool , I get circles loool :D
In the conversation part when you enter the conversation app, the avatars are square and not circle , is it possible to change it in there too ? what about some triangle shaped avatar ? lool :D

What If I change the size to 10 ? it makes the avatar's corner rounder ?

thanks alot .

b666m 2010-02-14 17:25

Re: Customize N900 Conversations
 
Quote:

Originally Posted by SR90 (Post 526126)
coool , I get circles loool :D
In the conversation part when you enter the conversation app, the avatars are square and not circle , is it possible to change it in there too ?

of course.
just edit the lines of *ChatConversation.css in the html-folder.

Quote:

what about some triangle shaped avatar ? lool :D
wouldn't look good and it's surely not easy to do :)

Quote:

What If I change the size to 10 ? it makes the avatar's corner rounder ?

thanks alot .
if 0px is no rounding and with 30px radius you get a circle on a 60px image... what do you think?! ;)

SR90 2010-02-14 17:29

Re: Customize N900 Conversations
 
Thanks alot b666m , I got the idea :)

Let the modding begin (It seems i have started the path to brick my n900 already lol)

Cheers.

b666m 2010-02-14 17:33

Re: Customize N900 Conversations
 
modding/editing the files in the html-folder can't brick your device ;)

SR90 2010-02-14 22:08

Re: Customize N900 Conversations
 
lool ;) , thanks for the info .

cassidy12 2010-02-16 05:12

Re: Customize N900 Conversations
 
I've modded the chat....but I cannot see messages in my IM when I go into it...Please help

b666m 2010-02-16 15:47

Re: Customize N900 Conversations
 
Quote:

Originally Posted by cassidy12 (Post 528746)
I've modded the chat....but I cannot see messages in my IM when I go into it...Please help

upload a screenshot and your files.
files as attachment or only the code via [.code] ... [./code] tag (without the . ^^) ;)

Schturman 2010-02-17 16:54

Re: Customize N900 Conversations
 
Hello again !
Another question....
How I can get a bigger font of my name and name of "other" in the SMS and IM conversations ?

I tried play with this block, but without result :(

Code:

* the Name field
 */
span.MessageNameField.Self {
  font-size:32px
  color:#4169E1;
  word-wrap: break-word;
  vertical-align: middle;
}

span.MessageNameField.Other {
  color:#FF0000;
  word-wrap: break-word;
  vertical-align: middle;
}

Thanks

b666m 2010-02-17 16:59

Re: Customize N900 Conversations
 
you forgot the semicolon ; after the command?! o.O

Schturman 2010-02-17 17:04

Re: Customize N900 Conversations
 
Ohhh.. I found my mistake, now it ok. :)
Thanks

calvin_42 2010-02-17 23:38

Re: Customize N900 Conversations
 
Great topic!

Thanks for your files b666m :)

xgrind 2010-02-19 19:45

Re: Customize N900 Conversations
 
Hi B666M,

How do we change the font used in Conversations?

b666m 2010-02-19 22:16

Re: Customize N900 Conversations
 
Quote:

Originally Posted by xgrind (Post 537179)
Hi B666M,

How do we change the font used in Conversations?

http://www.w3schools.com/css/css_font.asp

there you'll find a website font compilation (http://www.w3schools.com/css/css_websafe_fonts.asp) and you can try it yourself by clicking the green button on the bottom of each break. :)

there's another thread around where you can replace the whole system-font - it's pretty cool too. just search for it. ;D

edit: helpful app for viewing installed system fonts or own fonts in any directory -> http://maemo.org/downloads/product/M...quickbrownfox/ (:

Lobi_Earl 2010-02-20 01:10

Re: Customize N900 Conversations
 
Hey b666m I'm always trying to get my avatars corners rounded they dont match to the message bubbles Ive seen some screenshots where u guys had yours rounded pretty well could you please tell me what I need to edit in css or js???

thanks in advance

b666m 2010-02-20 01:14

Re: Customize N900 Conversations
 
you need to edit the css...
in the middle of page 25 i made a bigger post.
there you can see the radius-command.

if you start reading from there you should know everything you need. :)

xgrind 2010-02-20 09:07

Re: Customize N900 Conversations
 
Hey thanks for the tips!

I actually changed the system font, only to find that the font in Conversations is not changed, hence seeking your expertise :)



Quote:

Originally Posted by b666m (Post 537441)
http://www.w3schools.com/css/css_font.asp

there you'll find a website font compilation (http://www.w3schools.com/css/css_websafe_fonts.asp) and you can try it yourself by clicking the green button on the bottom of each break. :)

there's another thread around where you can replace the whole system-font - it's pretty cool too. just search for it. ;D

edit: helpful app for viewing installed system fonts or own fonts in any directory -> http://maemo.org/downloads/product/M...quickbrownfox/ (:


b666m 2010-02-20 09:12

Re: Customize N900 Conversations
 
Quote:

Originally Posted by xgrind (Post 538119)
Hey thanks for the tips!

I actually changed the system font, only to find that the font in Conversations is not changed, hence seeking your expertise :)

haven't changed the font.
but something like "font-family:" should do the trick.
or maybe open up the html and define it there.

http://de.selfhtml.org/css/eigenscha...tm#font_family

Lobi_Earl 2010-02-20 12:09

Re: Customize N900 Conversations
 
Very nice I've managed to get the SMS avatars borders rounded but not the IM ones... I'm trying and trying but its kinda different from the SMS css...damn could anyone please post their settings in IM css so that I can look where my fault is?

thank you

martie1 2010-02-20 12:34

Re: Customize N900 Conversations
 
I changed my IM and my SMS thing into the bubble style but it's now very laggy when i scroll up and down.... Someone got the same problem?

Lobi_Earl 2010-02-20 12:47

Re: Customize N900 Conversations
 
yeah I can report the same mine's also very lame now... I noticed that when opening chat conversation it always puts you at the start so you always have to scroll down to the bottom.
That can be pretty annoying when the conversation is already quite long.... Is there any way to fix it?

b666m 2010-02-20 12:58

Re: Customize N900 Conversations
 
this problem for im-conversation have all of the users who edited the files. don't know what's causing this one. :/
(and i'll not look into this because i use pidgin for im *g*)

and it's clear that it's getting laggier the more you add to the layout. all of the things must be rendered by the n900. and as the loading of the messages is done dynamically (always a block of 10 messages or so) it can be pretty laggy if you're scrolling fast. (and i think the conversation uses the mozilla-engine for rendering the layout... and this is not good)

(i've done some browser javascript comparisions in this forum... firefox and microb (with the mozilla-engine) suck big time... only the webkit browsers tear and midori are pretty fast at js ^^)

Lobi_Earl 2010-02-20 13:23

Re: Customize N900 Conversations
 
ok then we have to accept this... could you tell me how I get my IM avatars rounded, I dont get that managed with my minimal know-how :)

b666m 2010-02-20 13:32

Re: Customize N900 Conversations
 
haven't tried it... but i would open the smsconversation css and the imconversation css next to each other... and would look at the differences in the avatar-block ;)

Schturman 2010-02-20 17:05

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Lobi_Earl (Post 538400)
ok then we have to accept this... could you tell me how I get my IM avatars rounded, I dont get that managed with my minimal know-how :)


This my avatar block from IM css file, try it:

Code:

* Avatars
 */
img.MessageAvatar {
  width: 64px;
  height: 64px;
  outline-style: solid;
  outline-width: 4px;
  outline-offset: -1px;
  -moz-outline-radius: 13px;
  padding: 1px;
  vertical-align: middle;
}

div.MessageAvatar {
  width: 64px;
  height: 64px;
  -moz-border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
}


Thanks to b666m ;)

xgrind 2010-02-20 19:02

Re: Customize N900 Conversations
 
You are right.

I added "font-family: "Calibri", Times, Serif;" and the font changed

Thanks again! :D

Quote:

Originally Posted by b666m (Post 538127)
haven't changed the font.
but something like "font-family:" should do the trick.
or maybe open up the html and define it there.

http://de.selfhtml.org/css/eigenscha...tm#font_family


agentsmith 2010-02-21 23:26

Re: Customize N900 Conversations
 
Quote:

Originally Posted by Schturman (Post 532536)
Hello again !
Another question....
How I can get a bigger font of my name and name of "other" in the SMS and IM conversations ?

I tried play with this block, but without result :(

Code:

* the Name field
 */
span.MessageNameField.Self {
  font-size:32px
  color:#4169E1;
  word-wrap: break-word;
  vertical-align: middle;
}

span.MessageNameField.Other {
  color:#FF0000;
  word-wrap: break-word;
  vertical-align: middle;
}

Thanks

I'm trying to change the color of my name, which file has this code in it? Thanks.

b666m 2010-02-21 23:28

Re: Customize N900 Conversations
 
Quote:

Originally Posted by agentsmith (Post 540271)
I'm trying to change the color of my name, which file has this code in it? Thanks.

one of the css files. if you want to change it for sms then *SMSConversation*.css and for im *IMConversation*.css :)

qole 2010-02-24 22:54

Re: Customize N900 Conversations
 
I had to bump outline-width in img.MessageAvatar up to 6px in order to hide the corners of the pictures. Until I did that, the corners peeked out from behind the border as little triangles.

Quote:

Originally Posted by Schturman (Post 538659)
This my avatar block from IM css file, try it:

Code:

* Avatars
 */
img.MessageAvatar {
  width: 64px;
  height: 64px;
  outline-style: solid;
  outline-width: 4px;
  outline-offset: -1px;
  -moz-outline-radius: 13px;
  padding: 1px;
  vertical-align: middle;
}

div.MessageAvatar {
  width: 64px;
  height: 64px;
  -moz-border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
}

Thanks to b666m ;)


b666m 2010-02-24 23:07

Re: Customize N900 Conversations
 
something new for you :)

you can use -moz-border-radius for all four corners
or
-moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomleft, -moz-border-radius-bottomright for each single corner.

i would think of 3 things which would look very cool:
1. have 3 corners rounded, one not
2. have 2 corners rounded, best on opposed sides
3. having different radiuses (<- w00t? ^^) for each/some corners

(point 2 is my personal favorite ^^)

haven't tried this... but i hope that this works... so if feel free to test :)

for some previews and/or inspiration:
http://www.the-art-of-web.com/css/border-radius/ :D

edit: take a look at the bottom of the page where the "new Firefox short-hand properties" are mentioned. maybe they'll work on the n900 too. (:


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

vBulletin® Version 3.8.8