Customize N900 Conversations - Page 55 - maemo.org

Active Topics

The N900 is now 15 years old! (7)
to Nokia N900 by Danct12 - 3 days, 23 hrs ago
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (4)
to SailfishOS by Maemish - 4 days, 19 hrs ago
more...

Page 55 of 110

Thread Tools

	niqbal	2010-04-19 , 05:56
	Posts: 474 \| Thanked: 368 times \| Joined on Jan 2010	#541

Originally Posted by iceman600

@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.

Quote & Reply |

	iceman600	2010-04-19 , 06:23
	Posts: 324 \| Thanked: 65 times \| Joined on Jun 2008 @ FL	#542

Originally Posted by niqbal

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

Quote & Reply |

FauX	2010-04-19 , 23:30
Posts: 4 \| Thanked: 0 times \| Joined on Apr 2010	#543

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!

Quote & Reply |

benso	2010-04-19 , 23:53
Posts: 2 \| Thanked: 0 times \| Joined on Apr 2010	#544

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.

Quote & Reply |

	niqbal	2010-04-20 , 04:28
	Posts: 474 \| Thanked: 368 times \| Joined on Jan 2010	#545

Originally Posted by benso

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.

Quote & Reply |

meLi	2010-04-20 , 06:03
Posts: 29 \| Thanked: 4 times \| Joined on Apr 2010	#546

Originally Posted by niqbal

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.

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

Quote & Reply |

	niqbal	2010-04-20 , 07:24
	Posts: 474 \| Thanked: 368 times \| Joined on Jan 2010	#547

Originally Posted by FauX

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

Quote & Reply |

	iceman600	2010-04-20 , 08:08
	Posts: 324 \| Thanked: 65 times \| Joined on Jun 2008 @ FL	#548

Originally Posted by niqbal

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.

Quote & Reply |

meLi	2010-04-20 , 08:13
Posts: 29 \| Thanked: 4 times \| Joined on Apr 2010	#549

Originally Posted by niqbal

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

Quote & Reply |

	niqbal	2010-04-20 , 13:25
	Posts: 474 \| Thanked: 368 times \| Joined on Jan 2010	#550

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, 323 views)
	kopeteStyle-im.zip (9.1 KB, 314 views)

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

Quote & Reply |

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

Page 55 of 110

Active Topics

The N900 is now 15 years old! (7)

Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (4)