maemo.org - Talk - Customize N900 Conversations

Page 8 of 28

« First

< Prev

Next >

Last »

Show 40 post(s) from this thread on one page

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-24 23:08

Re: Customize N900 Conversations

I have this too before.... -moz-border-radius - Should be 10px
Try this option:

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;

}

Schturman

2010-02-24 23:19

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 545084)

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. (:

Thanks for this link, I'll try this :D

b666m

2010-02-24 23:21

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 545097)

Thanks for this link, I'll try this :D

np :)

please post if it works... and make a screenshots if it does ^^

qole	2010-02-24 23:57

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 545086)

I have this too before.... -moz-border-radius - Should be 10px

Aha, I had just copied -moz-outline-radius instead of -moz-border-radius, thanks!

ddwwf1

2010-02-25 00:16

Re: Customize N900 Conversations

does anyone know how i can take a whole sms convosation and copy it and paste it into a word document so it can be printed or emailed

Schturman

2010-02-25 00:36

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 545101)

np :)

please post if it works... and make a screenshots if it does ^^

Ok, I tried this code, not good...

Code:

img.MessageAvatar { 

  width: 64px;

  height: 64px;

  outline-style: solid; 

  outline-width: 4px; 

  outline-offset: -1px; 

  -moz-outline-radius: 20px;

  padding: 1px;

  vertical-align: middle; 

}



div.MessageAvatar { 

  width: 64px;

  height: 64px;

  -moz-border-radius-topright: 20px;

  -moz-border-radius-topleft: 4px;

  -moz-border-radius-bottomright: 4px

  -moz-border-radius-bottomleft: 20px

  border-width: 1px;

  border-style: solid;

  display: inline-block;

  vertical-align: middle;

}

http://i46.tinypic.com/21nih5j.png

Off question....
Look at this picture, I don't know why, but only this IM conversation not jumping to the top of the page when I open it and all other IM conversations is jumping.... Why, I don't know...:confused:

b666m

2010-02-25 00:49

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 545172)

Ok, I tried this code, not good...

Code:

img.MessageAvatar { 

  width: 64px;

  height: 64px;

  -moz-border-radius-topright: 20px;

  -moz-border-radius-topleft: 4px;

  -moz-border-radius-bottomright: 4px

  -moz-border-radius-bottomleft: 20px

  border-width: 1px;

  border-style: solid;

  padding: 1px;

  vertical-align: middle; 

}



div.MessageAvatar { 

  width: 64px;

  height: 64px;

  -moz-border-radius-topright: 20px;

  -moz-border-radius-topleft: 4px;

  -moz-border-radius-bottomright: 4px

  -moz-border-radius-bottomleft: 20px

  border-width: 1px;

  border-style: solid;

  display: inline-block;

  vertical-align: middle;

}

try adding the red code :)

Quote:

Off question....
Look at this picture, I don't know why, but only this IM conversation not jumping to the top of the page when I open it and all other IM conversations is jumping.... Why, I don't know...:confused:

mhm... as i said... i don't know why this is happening... the conversations getting loaded by the js-file... and there's only the avatar-mod done.. :/

Schturman

2010-02-25 11:05

Re: Customize N900 Conversations

I tried this too, not good :cool:

http://i50.tinypic.com/r0xlhu.png

b666m

2010-02-25 15:49

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 545626)

I tried this too, not good :cool:

http://i50.tinypic.com/r0xlhu.png

maybe i'll have to sit my lazy a** in front of this and try to get it work :p

b666m

2010-02-25 16:06

Re: Customize N900 Conversations

ehm.... first attempt... strike: ^^

http://img19.imageshack.us/img19/303...0022517045.png

Code:

div.Avatar {

  width: 60px;

  display: inline-block;

  vertical-align: middle;

}



.MessageAvatar {

  width: 60px;

  height:60px;

  -moz-border-radius-topright: 10px;

  -moz-border-radius-topleft: 5px;

  -moz-border-radius-bottomright: 15px;

  /*-moz-border-radius-bottomleft: 20px;*/

  border-width: 2px;

  border-style: solid;

edit: as you can see.... bottomleft no corner... topleft 5px... topright 10px... bottomright 15px... all with a 2px border... for your orientation when planning the border-radius :)

slender

2010-02-25 16:14

Re: Customize N900 Conversations

Hey,

Has someone made "dull" layout for conversations. Something like this:

Contact: message here date|clock
Me: message here date|clock

Contact with link to contact card.

b666m

2010-02-25 16:21

Re: Customize N900 Conversations

and for your joy: ^^

http://img693.imageshack.us/img693/1...0022517184.png

Code:

div.Avatar {

  width: 60px;

  display: inline-block;

  vertical-align: middle;

}



.MessageAvatar {

  width: 60px;

  height:60px;

  -moz-border-radius: 15px 30px 30px 15px / 10px 20px 20px 10px;

  border-width: 2px;

  border-style: solid;

the mozilla engine seems to be the latest out there (from firefox 3.5) otherwise this command wouldn't work (this is what the site i've posted one site back tells me ^^)

b666m

2010-02-25 16:24

Re: Customize N900 Conversations

Quote:

Originally Posted by slender (Post 546074)

Hey,

Has someone made "dull" layout for conversations. Something like this:

Contact with link to contact card.

mhm... i only made sms conversation in an im conversation style... with both avatars on the left side... but the date is in the message-bubble as usual...

you want to have the date outside this bubble, right? maybe in an extra bubble or just as a text outside?

slender

2010-02-25 16:27

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 546089)

Heh. Thank you for your help. But my whole point is to have really really basic "dull" and effective/pixel wise conversation so no bubbles no effects (but colors yes) no avatars. Bit like on irc.

b666m

2010-02-25 16:39

Re: Customize N900 Conversations

Quote:

Originally Posted by slender (Post 546094)

Heh. Thank you for your help. But my whole point is to have really really basic "dull" and effective/pixel wise conversation so no bubbles no effects (but colors yes) no avatars. Bit like on irc.

aaaaaaaah... now i get your point :D

let's see what i can do for you (:

b666m

2010-02-25 17:30

Re: Customize N900 Conversations

mhm... first attempt:

http://img144.imageshack.us/img144/3...0022518262.png

i thought it might be a good idea to have the background-colors because you can identify faster who wrote the message.
(don't know if you're thinking the same way ^^)

but you can change the background-colors for not seeing any kind of bubbles...

any suggestions? (:

edit: oh... i forgot to edit the min-height of those messages... that's why one-liners look kind of mis-aligned... but that's quick-to-fix :)

slender

2010-02-25 17:32

Re: Customize N900 Conversations

Haa. Looks better. I didn't thought that separation can be made also with backgrounds. On my digsby I have colored my contact conversation on red and my own text just black or on this case white so it really jumps to your eyes, but this is also fine. It would be nice if it is possible to take all padding between conversations away.

Lobi_Earl

2010-02-25 18:01

Re: Customize N900 Conversations

omg b666m where did you learn to code that good?? I wish I could do this too I'd really like to get the message bubble's corners rounded same as the avatars are... got this problem in IM conversations cause I'm not using the bubbles css postet earlier in this Thread, it was way too laggy... :(

Schturman

2010-02-25 19:50

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 546058)

ehm.... first attempt... strike: ^^

http://img19.imageshack.us/img19/303...0022517045.png

Code:

div.Avatar {

  width: 60px;

  display: inline-block;

  vertical-align: middle;

}



.MessageAvatar {

  width: 60px;

  height:60px;

  -moz-border-radius-topright: 10px;

  -moz-border-radius-topleft: 5px;

  -moz-border-radius-bottomright: 15px;

  /*-moz-border-radius-bottomleft: 20px;*/

  border-width: 2px;

  border-style: solid;

edit: as you can see.... bottomleft no corner... topleft 5px... topright 10px... bottomright 15px... all with a 2px border... for your orientation when planning the border-radius :)

Haaaa, Thanks ! Looks nice ! :D
But I tried getting this on the IM :D

b666m

2010-02-25 20:00

Re: Customize N900 Conversations

Quote:

Originally Posted by slender (Post 546192)

i can remove that paddings/margins. :)

you could describe how you like to see the layout.

which background color(s), which font color(s) and so on...

maybe you could make a screenshot or picture how you would like to have it (:

b666m

2010-02-25 20:04

Re: Customize N900 Conversations

Quote:

Originally Posted by Lobi_Earl (Post 546235)

mhm? ^^

nowhere. :p

i learned C and JAVA (and CAPL for automotive bus systems) :D

html and css are really easy.

in html you only have to care about the tags <div> ... </div> and <span> ... </span> and what class-names are used.

then in the css you can take this class-names and modify the style/layout of the content.

for all options/commands -> google. xD

Schturman

2010-02-26 07:24

Re: Customize N900 Conversations

Thanks b666m :D
Looks very nice... I tried get this on IM conversation too, but without good result :(

http://i47.tinypic.com/2nghcua.png

Maybe you know, how I can get the "time & date" appear below to the "name" like here (yellow block is the "time & date")?:

http://i50.tinypic.com/157pcy.png

Here my time blocks:

Code:

span.MessageTimeStamp.Self {

  white-space: nowrap;

  vertical-align: middle;

  padding-top: 12px;

  margin-top:   8px; 

  margin-left:  1px;

  margin-right: -2px;

}



span.MessageTimeStamp.Other {

  white-space: nowrap;

  vertical-align: middle;

  padding-top: 6px;

  margin-top:   8px; 

  margin-left:  1px;

  margin-right: -2px;

}

Thanks

b666m

2010-02-26 11:05

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 547079)

Thanks b666m :D
Looks very nice... I tried get this on IM conversation too, but without good result :(

yep, looks pretty cool :)

mhm... i just don't know where the differences in sms and im conversation are... :/

Quote:

Maybe you know, how I can get the "time & date" appear below to the "name" like here (yellow block is the "time & date")?

it looks like you have changed the order of those blocks in the html right?

i think you have to change the order back to message-text in front of the timestamp and then doing a break in between of those + align the timestamp in the css to the right side :)

edit: or on a more dirty way: just turn the order back and add a left-margin to the timestamp which is as wide as your message-bubble - and of course align it to the right side here too ^^

Schturman

2010-02-26 13:08

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 547333)

yep, looks pretty cool :)

mhm... i just don't know where the differences in sms and im conversation are... :/

it looks like you have changed the order of those blocks in the html right?

i think you have to change the order back to message-text in front of the timestamp and then doing a break in between of those + align the timestamp in the css to the right side :)

edit: or on a more dirty way: just turn the order back and add a left-margin to the timestamp which is as wide as your message-bubble - and of course align it to the right side here too ^^

Thanks, I'll try this...
Another question....
How I can change the corners only on the "Other" avatar, like on this picture ? (don't look on the face of guy, see only the corners of avatar)

http://i48.tinypic.com/34rd89l.png

b666m

2010-02-26 13:21

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 547516)

How I can change the corners only on the "Other" avatar, like on this picture ?

that depends on how your html-file looks like.

if you have different class names for your and your contact's avatar then this should do it:

Code:

.MessageAvatar.Other {

  width: 60px;

  height:60px;

  -moz-border-radius: 15px 30px 30px 15px / 10px 20px 20px 10px;

  border-width: 2px;

  border-style: solid;

if you like to set another style for your avatar do this:

Code:

.MessageAvatar.Self {

  width: 60px;

  height:60px;

  -moz-border-radius: 15px 30px 30px 15px / 10px 20px 20px 10px;

  border-width: 2px;

  border-style: solid;

of course the -moz-border-radius line is just an example :)
(you can use your four lines for topleft, etc instead)

Schturman

2010-02-26 14:01

Re: Customize N900 Conversations

I tried this before...
I don't know why, but if I add ".Self" and ".Other" to the .MessageAvatar I got the conversation without avatars :confused:

Maybe I need change something in the HTML file ?

for me:

Code:

  <div class="Avatar">

    <div id="AvatarImgSelf" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor "></div>

  </div>

for other:

Code:

 <div class="Avatar">

   <div id="AvatarImgOther" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor "></div>

  </div>

Schturman

2010-02-26 14:16

Re: Customize N900 Conversations

Yess, I got this :D

b666m

2010-02-26 14:25

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 547555)

for me:

Code:

  <div class="Avatar">

    <div id="AvatarImgSelf" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor Self"></div>

  </div>

for other:

Code:

 <div class="Avatar">

   <div id="AvatarImgOther" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor Other"></div>

  </div>

i added the changes in red.

after that the .Self and .Other options should work in the css :)

Schturman

2010-02-26 14:44

Re: Customize N900 Conversations

Yes, yes I did it myself , see my message before :)
Here is the result, I change the bubble too :D

http://i48.tinypic.com/34zaz5k.png

b666m

2010-02-26 14:56

Re: Customize N900 Conversations

now when i look at this... i think it would be even cooler if you could remove those spaces in between the avatars and the bubbles:

http://img59.imageshack.us/img59/8905/34zaz5k.png

others avatar:
- only round off bottom left corner
others bubble:
- only round off top right corner

your avatar:
- only round off bottom right corner
your bubble:
- only round off top left corner

so that this would look like one big bubble without any spaces.
(this would look especially cool if it's only a one-line message)

Schturman

2010-02-26 16:20

Re: Customize N900 Conversations

Thanks, I tried this, but you are right, this option only for one-line message :)

I tried to edit block placed below to the timestamp

Code:

div.MessageRight {

  float: left;

  padding-right: 10px;

  white-space: nowrap;

  text-align: left;

  display: inline-block;

}

I change the"float: left;" to "float: right;"... Timestamp jump to the right, in front of the name, but not below the name... It stayed on the same line and move the name to left.
How I can get this time&date below the name (another line) ?
Thanks

b666m

2010-02-26 16:25

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 547758)

as i said... move the timestamp-div-block in the html file below the message-text-block.

if this doesn't work immediately you can add a margin-left line with a value of the bubble-width to make a break via css. ^^

SR90	2010-02-27 12:31

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 547625)

That is looking Awesome ,reminds me of my nokia 7610 design :p

The right portion can be more pointy same as the left portion of the txt msg bubble and then it would be perfect .

Can anyone do the coding/modding and zip it and upload it same as the one b666m did already on the page 4 ?

Cheers

Schturman

2010-02-27 12:55

Re: Customize N900 Conversations

I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages. :(

Code:

    <span id="MessageTextSelf" class="MessageText Self"></span>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

      <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span>

    <div class="MessageRight Self">

b666m

2010-02-27 13:06

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 548800)

I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages. :(

Code:

    <div id="MessageTextSelf" class="MessageText Self"></div>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

      <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span>

    <div class="MessageRight Self">

div and span are for block-building.

div adds a new break (after the /div !!!). span only groups things. :)

b666m

2010-02-27 13:10

Re: Customize N900 Conversations

Quote:

Originally Posted by SR90 (Post 548777)

if Schturman uploads his current sms-layout as shown in his screenshots i could edit those few lines. :)

(i don't want to do all the work on my own to get these results xD)

Schturman

2010-02-27 13:39

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 548808)

Code:

    <div id="MessageTextSelf" class="MessageText Self"></div>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

      <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span>

    <div class="MessageRight Self">

div and span are for block-building.

div adds a new break (after the /div !!!). span only groups things. :)

Haaaa, Thanks ! I forgot about it :o I try this later...

Quote:

Originally Posted by SR90

Here is my files for this picture:

http://i48.tinypic.com/34zaz5k.png

But this files edited for right to left for hebrew language, I do not think it will suit you :)

b666m

2010-02-27 13:45

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 548835)

But this files edited for right to left for hebrew language, I do not think it will suit you :)

thanks :)

np... i won't touch neither the js-file nor the html-file ^^

and the css-file should just be responsible for the style. so i think it'll work out for everyone.

but i'm going to test that right now ;)

edit: ok, you're right... the style looks great... the alignment isn't the same... so i guess i'll have to make some patchwork *G*

b666m

2010-02-27 16:09

Re: Customize N900 Conversations

first attempt:

looks good for own messages :)

don't get the other's avatar and message aligning to the right side and the space between bubble and avatar is strange too :/
but i'll keep trying :D

(btw: i used the direction-command you used in your html. but there i have some problems with text-wrapping and so on :/)

ahhh... nearly forget the image xD

http://img715.imageshack.us/img715/5...0022717060.png

b666m

2010-02-27 17:42

Re: Customize N900 Conversations

update:

alignment to the right side is ok.
after some problems with the alignment of the own avatar and messages it all looks pretty good.
but i don't have any clue why there are gaps between bubbles and avatars again.... -.-'

http://img109.imageshack.us/img109/2...0022718414.png

edit:
that's the code so far:

Code:

/**

 * Style rules for the MessageBuffer

 */



/**

 * the body defaults

 */

body {

  padding: 0px 16px;

  margin: 0px;

}



/**

 * The table column formats

 */



div.Message.Self {

  float: left;

}



div.Message.Other {

  float: right;

}



div.Message:first-child {

  padding-top: 0px;

}



div.Message:last-child {

  padding-bottom: 0px;

}



div.BubbleSelf {

  background: #600000;



  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topright: 30px;



  border-style: solid;



  border-width: 2px;



  margin: 4px 0px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;  

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



div.BubbleOther {

  background: #2F4F4F;



  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topleft: 30px;



  border-style: solid;



  border-width: 2px;

  

  margin: 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



div.BubbleSelfClicked {

  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topright: 30px;



  border-style: solid;



  border-width: 2px;



  margin: 4px 0px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;

  max-width: 620px;

 /* overflow: hidden; this bugs mouse events. see bug #123077 */

}





div.BubbleOtherClicked {

  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topleft: 30px;



  border-style: solid;



  border-width: 2px;

  

  margin: 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



/**

 * Others' Avatars

 *

 * This needs a "drop down" shadow, but no idea if that can be done

 *Adele: please note that this drop down shadow might be subjected to change

 *I've talked about it with Vilja who's in charge of address book layout

 *and we might change it so that it's a double border colour to indicate

 *that the avatar is clickable. drop shawdow doesn't seem to work with

 *dark backgrounds unless it's a light colour drop shadow.

 *PLEASE tell me if it's difficult to implement the drop shadow.

 * Looks like drop shadow is dropped from ui specs. And bug 139130 made me

 *remove the space for it anyway.

 */



div.Avatar {

  width: 60px;

  display: inline-block;

  vertical-align: top;

}



.MessageAvatar.Self {

  margin-top: 4px;

  margin-right: 0px;



  width: 60px;



  height:60px;



  -moz-border-radius-bottomleft: 30px;



  border-width: 2px;



  border-style: solid;



}



.MessageAvatar.Other {

  margin-top: 4px;



  width: 60px;



  height:60px;



  -moz-border-radius-bottomright: 30px;



  border-width: 2px;



  border-style: solid;



}



img.MessagePresence {

  vertical-align: middle;

  width: 16px;

  height: 16px;

}



/**

 * the Name field

 */

span.MessageNameField {

  word-wrap: break-word;

  vertical-align: middle;

}



/**

 * the Text field

 */

span.MessageText.Self {

  text-align: left;

  vertical-align: middle;

  word-wrap: break-word;

}



span.MessageText.Other {

  text-align: right;

  vertical-align: middle; 

  word-wrap: break-word;

}



/**

 * the TimeStamp default rules

 */

div.MessageRight {

  float: right;

  margin-left: 8px;

  white-space: nowrap;

  text-align: right;

  display: inline-block;

}



img.MessageBusinessCardImg {

  vertical-align: middle;

}



img.MessageStatusImg {

  vertical-align: middle;

}



.MessagingWidgetsSmiley {

  height: 24px;

  width: 24px;

}

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

Page 8 of 28

Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8