maemo.org - Talk - Customize N900 Conversations

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)

Re: Customize N900 Conversations

Two last looks cool !!! :D
I'll try this at home :)

Re: Customize N900 Conversations

Quote:

Originally Posted by Ronaldo (Post 549209)

can you tell me how i can add my picture to original one instead of "you"

Check out page 4 of this thread :D

Cheers

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 549368)

last tweak for tonight:

http://i48.tinypic.com/5nufe0.jpg

Code:

/**

 * Style rules for the MessageBuffer

 */



/**

 * the body defaults

 */

body {

  padding: 0px 16px;

  margin: 0px;

}



/**

 * The table column formats

 */



div.Message {

  clear: both;

  margin-top: -22px;

}



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 {

  position: relative;

  z-index: 2;



  background: #600000;



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







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

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

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



  border-style: solid;



  border-width: 2px;



  margin: 35px 0px 4px -15px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;  

  max-width: 636px;

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

}



div.BubbleOther {

  position: relative;

  z-index: 2;



  background: #2F4F4F;



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







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

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

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



  border-style: solid;



  border-width: 2px;

  

  margin: 35px -19px 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 636px;

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

}



div.BubbleSelfClicked {

  position: relative;

  z-index: 2;



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







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

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

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



  border-style: solid;



  border-width: 2px;



  margin: 35px 0px 4px -15px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;

  max-width: 636px;

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

}





div.BubbleOtherClicked {

  position: relative;

  z-index: 2;



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







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

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

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



  border-style: solid;



  border-width: 2px;

  

  margin: 35px -19px 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 636px;

  /* 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 {

  position: relative;

  z-index: 1;

  margin-top: 4px;

  margin-right: 0px;

  width: 60px;

  height: 60px;



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

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

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

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



  border-width: 2px;



  border-style: solid;



}



.MessageAvatar.Other {

  position: relative;

  z-index: 1;

  margin-top: 4px;

  width: 60px;

  height: 60px;



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

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

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

  -moz-border-radius-bottomleft: 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;

}

feel free to post critique or suggestions :)

... or just have fun with it xD

edit: with 0.8 opacity for the bubbles and bit re-aligned:

http://img717.imageshack.us/img717/2...0022801054.png

i like this but it scrolls SOOOOOOO slow, plus avatars dont show

Re: Customize N900 Conversations

Quote:

Originally Posted by f2thak (Post 549666)

i like this but it scrolls SOOOOOOO slow, plus avatars dont show

you need the modded html- and js-file too. (:
and of course copy over a picture for your avatar since it's not loading correctly for sms conversations from id. ^^

and yep. it's kind of slow.
but that's because of the poor javascript performance of the mozilla browser engine which is used for displaying those conversations.
i posted something in the js speed comparision thread that mozilla is working on "jaegermonkey" which should speed up js performance to a level like webkits (tear, midori) and safari (well-known from iphone).

right now mozilla is using an engine from 2007 (!!!) which tries to find loops in js-code to make it faster.
if it doesn't find any of those - it's slow as hell.
other browser are using a much easier way which pays off more often:
they are building blocks in js code and speeding up the calculation. (this is where jaegermonkey will step in)

i'll make some zips.
programming an app for doing this replacement isn't hard at all because the only thing it has to do is copy the content of a directory in MyDocs (where you have access with usb and normal user) to the html-folder (where you have to be root to change things).

i think if some more people would be interested in modding conversations a programmer like VDVsx (who has made the bootscreen-app which is doing nearly the exact same thing as this app should do) could write a small app for doing this. :)

Re: Customize N900 Conversations

thanks, if someone made an app, it would be really appreciated

Re: Customize N900 Conversations

mhm... how would you like a css-file with comments where i explain what the command below is doing exactly.

something like:

Code:

/* moving the bubble around: top right bottom left */

margin: 25px -19px 4px 0px;

then you could easily change the alignments, colors, opacity, size and so on?! (:

Re: Customize N900 Conversations

so...
here's the package you'll always need which contains the modded html- and js-file to have both avatars.

and in addition there's the css which does the following:
http://img717.imageshack.us/img717/2...0022801054.png

i have added many comments to the code itself to help you in case you want to change something :)

for instructions on where you have to place these files and what to do to get your own avatar, please refer to:
http://talk.maemo.org/showpost.php?p...5&postcount=33 ^^

have fun, everyone! :D

EDIT:
updated the js-file with the scroll-fix which will prevent the conversation view starting from the top. now it will be down at the bottom of the conversation showing the latest messages. :)

Re: Customize N900 Conversations

for getting into the whole css-stuff have a look at the css-file attached to my posting above.

if you want another basis for your own style:
http://img717.imageshack.us/img717/3...0022723265.png

if you'd rather have corners than of roundings it's just a matter of seconds to edit the css.
just look at the -moz-border-radius lines. (:

:)

Re: Customize N900 Conversations

b666m , Thanks for the uploads ;)

Any chance of getting the 7610 style ones with proper alignment and codes ?

For the one you have posted already , If I send a 2 sentence txt , would the bubbles and avatars look ok and aligned ?

There is a need for the app , SOME1 should make app to change the looks of conversation with ability to change the colors and shades :(

Re: Customize N900 Conversations

Quote:

Originally Posted by SR90 (Post 549741)

b666m Any chance of getting the 7610 style ones with proper alignment and codes ?

screenshot please. :)
then we'll see what can be done. ;)

Quote:

For the one you have posted already , If I send a 2 sentence txt , would the bubbles and avatars look ok and aligned ?

everything looks fine even with multiple line text-bubbles. ^^

Quote:

There is a need for the app , SOME1 should make app to change the looks of conversation with ability to change the colors and shades :(

i could write a script for executing within terminal or with help of a shortcut or automatically on shutdown. xD
but a gui would be the best for enduser.
maybe i should learn to make programs for the n900. :p