Customize N900 Conversations - Page 55 - maemo.org

niqbal | # 541 | 2010-04-19, 05:56 | Report

Originally Posted by iceman600 View Post

@niqbal im using your modified IM conversations and i did it also to my SMS conversations... i just change the filenames. problem is im not getting any avatar.. (on my messages)

ya it wont work like this. You will have to modify sms files. you dont have to modify .js sms file, just html and css.

Last edited by niqbal; 2010-04-19 at 14:17.

iceman600 | # 542 | 2010-04-19, 06:23 | Report

Originally Posted by niqbal View Post

ya it wont worl like this. You will have to modify sms files. you dont have to modify .js sms file, just html and css.

can u make it for me? PLS>>> i really like the design...

FauX | # 543 | 2010-04-19, 23:30 | Report

Hi,
This is just awesome... But i have no clue what im doing and currently has no idea on what needs to be added.

Currently it looks like this

But i want it to look like this

In other words, i want the timestamp to be shown under the sms text, still inside the box. And the box should also automatically resize depending on text length.

I know the colors are uggly, but thats not important, yet.

Code:

/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  margin-left: 16px;
  margin-right: 16px;
}

/**
 * The table column formats
 */

div.Message {
  padding-bottom: 8px;
  clear:	  both;
  display:        block;
  padding-left: 8px;
}

div.Message:first-child {
  padding-top: 0px;
}

div.Message:last-child {
  padding-bottom: 0px;
}

div.BubbleSelf {
   -moz-border-radius: 10px;
  background-color: Black;
  color:#5E0000;
  border-style:ridge;
  border-width: 1px;
  border-right-width: thick;
  border-bottom-width: 3px;
  border-bottom-color: #5E0000;
  border-right-color: #5E0000;
  border-top-width: 0px;
  border-left-width: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: auto;
  max-width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
 -moz-border-radius: 10px;
  background-color: Black;
  color:#5E0000;
  border-style:ridge;
  border-width: 1px;
  border-right-width: thick;
  border-bottom-width: 3px;
  border-bottom-color: #5E0000;
  border-right-color: #5E0000;
  border-top-width: 0px;
  border-left-width: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: auto;
  max-width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSpacer {
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
  display: table-cell;
  width: 664px;
  max-width: 664px;
  height: 52px;
}

div.BubbleSelfClicked {
  -moz-border-radius: 6px ;
  border-style: ridge;
  border-width: 5px;
  border-color: #000000;

  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 664px;
  min-height: 56px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  -moz-border-radius: 6px ;
  border-style: ridge;
  border-width: 5px;
  border-color: #000000;
  text-shadow: 0.1em 0.1em #000;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 664px;
  min-height: 56px;
  /* 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 {
  width: 60px;
  height:60px;
  outline-style: solid;
  outline-width: 1px;
  -moz-outline-radius: 6px;
}

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 {
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
}

/**
 * the TimeStamp default rules
 */
div.MessageRight {
  float: right;
  padding-left: 20x;
  white-space: nowrap;
  text-align: right;
  display: inline-block;
}

img.MessageBusinessCardImg {
  vertical-align: middle;
  padding-right: 4px;
}

img.MessageStatusImg {
  vertical-align: middle;
  padding-right: 8px;
}

.MessagingWidgetsSmiley {
  height: 24px;
  width: 24px;
}

Thanks!

benso | # 544 | 2010-04-19, 23:53 | Report

ive downloaded zip files to my fone and have no idea how to use them can anyone direct me on how to do that would i need to install a program to access those zip files? i am new to the n900 any help is appreciated thanx in advance.

niqbal | # 545 | 2010-04-20, 04:28 | Report

Originally Posted by benso View Post

ive downloaded zip files to my fone and have no idea how to use them can anyone direct me on how to do that would i need to install a program to access those zip files? i am new to the n900 any help is appreciated thanx in advance.

u need to copy zipped files to /usr/share/rtcom-messaging-ui/html folder on n900. copy the originals (maybe the whole html folder) on your laptop before copying zipped files.

meLi | # 546 | 2010-04-20, 06:03 | Report

Originally Posted by niqbal View Post

deleted theme3 from thread, there were little margin issues that i fixed this weekend. so re-posting the files here

how to remove gaps...mine still got gaps in between. I'm using niqbal conv-ui_theme3.zip

I want to remove gaps between sender and recepient.

TQ

Last edited by meLi; 2010-04-20 at 06:50.

niqbal | # 547 | 2010-04-20, 07:24 | Report

Originally Posted by FauX View Post

Hi,
This is just awesome... But i have no clue what im doing and currently has no idea on what needs to be added.

You have two questions, one is how to add dynamic width? second is how to put the timestamp under text message?

Add Dynamic Width

in your css file, you need to edit

Code:

BubbleSelfClicked {width:auto;}
BubbleOtherClicked {width:auto;}
BubbleSpacer {width:auto;}

Time Stamp under Text Message

First of all edit .html file and move MessageRight after MessageText like this. Do the same for both Self and Other

Code:

<html>

<span id="MessageSenderName"></span>
<br />
<span class="MessageText"></span>
<br /> 
<div class="MessageRight"></div>

</html>

then edit css file and MessageRight should be:

Code:

div.MessageRight {

  padding-left: 16px;
  white-space: nowrap;
  text-align: left;
  display: inline-block;
}

hope it helps

iceman600 | # 548 | 2010-04-20, 08:08 | Report

Originally Posted by niqbal View Post

so many f***ing issues and finally it came down to the extra protocol plugin for facebook chat. Do not use it. Use Jabber for facebook chat instead. Tested it using Skype + Facebook Chat via Jabber, worked flawlessly.

http://thenokiablog.com/2010/02/10/h...ut-of-the-box/

Own Avatar can be added by simply clicking on the 'avatar' and 'browse' to add. Image should be 60 px x 60 px png format. Your name will show the Username of whatever IM service you are using e.g. Skype ID, Msn ID etc.

theme1 for Conversations IM without any gap between Self and Other messages. theme2 for Conversations IM with gap between Self and Other messages.

Add the zipped files in /usr/share/rtcom-messaging-ui/html ; make sure to backup the original files.

@niqbal
can i request for a sms type for this so i have the same theme on my sms and im's...

i did put these files on my sms just changing thr filenames. it works but showing no avatar but on my im conversations i have an avatar.

meLi | # 549 | 2010-04-20, 08:13 | Report

Originally Posted by niqbal View Post

Not a problem at all. Can you edit .js file .. wait let me just attach the file instead. Its the same file, i just commented out the part where Gap was being created. Just copy it, thats it.

Tq very very much bro..

niqbal | # 550 | 2010-04-20, 13:25 | Report

Kopete influenced UI for both IM and SMS. Kindly don't forget to click Thanks at the bottom.

(im files are being reposted here)

Attached Images

Attached Files

	kopeteStyle-sms.zip (9.3 KB, 320 views)
	kopeteStyle-im.zip (9.1 KB, 311 views)

Last edited by niqbal; 2010-04-20 at 13:33.

The Following 13 Users Say Thank You to niqbal For This Useful Post:
Blinde, corduroysack, dscobsct, foobar, Harick, iceman600, MaddogG, Minhaz, qwertyberty, SkyEagle, SR90, Transcend