Customize N900 Conversations - Page 31 - maemo.org

Active Topics

Error after installing Leste on sdcard (13)
to Maemo 7 / Leste by Maemish - 14 hrs, 11 mins ago
TLS 1.2 for N9 is ready (29)
to MeeGo / Harmattan by smatkovi - 23 hrs ago
Camera phone competition March 2023 "Endless" (35)
to General by Maemish - 4 days, 8 hrs ago
Maemo repository (3)
to Community by torsen - 5 days ago
more...

Page 31 of 110

Thread Tools

	b666m	2010-02-25 , 20:04
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#301

Originally Posted by Lobi_Earl

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

mhm? ^^

nowhere.

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

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

Quote & Reply |

	Schturman	2010-02-26 , 07:24
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#302

Thanks b666m

Looks very nice... I tried get this on IM conversation too, but without good result

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

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

__________________
Lausanne & Lyon de descente...
----------------
Schturman's home page
Schturman's repo on openrepos
RPM packaging directly on your Jolla phone.
Root & User SSH access to Jolla via WinSCP.
Root and User SSH access to Jolla via Nautilus on Linux PC.

Quote & Reply |

	b666m	2010-02-26 , 11:05
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#303

Originally Posted by Schturman

Thanks b666m
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... :/

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

Last edited by b666m; 2010-02-26 at 11:08.

Quote & Reply |

The Following User Says Thank You to b666m For This Useful Post:
Schturman

	Schturman	2010-02-26 , 13:08
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#304

Originally Posted by b666m

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)

Quote & Reply |

	b666m	2010-02-26 , 13:21
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#305

Originally Posted by Schturman

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)

Quote & Reply |

	Schturman	2010-02-26 , 14:01
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#306

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

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>

Last edited by Schturman; 2010-02-26 at 14:04.

Quote & Reply |

	Schturman	2010-02-26 , 14:16
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#307

Yess, I got this

Quote & Reply |

	b666m	2010-02-26 , 14:25
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#308

Originally Posted by Schturman

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

Quote & Reply |

	Schturman	2010-02-26 , 14:44
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#309

Yes, yes I did it myself , see my message before

Here is the result, I change the bubble too

Last edited by Schturman; 2010-02-26 at 14:51.

Quote & Reply |

	b666m	2010-02-26 , 14:56
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#310

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:

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)