Customize N900 Conversations - Page 20 - maemo.org

Active Topics

Not clickbait "NOKIA STILL MAKING PHONES, BUT FOR INDUSTRIAL USES" (0)
to Competitors by deutch1976 - 2 hrs, 5 mins ago
Phone Camera Competition April 2021: "Funny & Foolish" (34)
to General by nonsuch - 11 hrs, 27 mins ago
What's the best Handheld gnu/linux machine for 20XX? (78)
to Competitors by clort - 1 day, 10 hrs ago
Unofficial Storage for camera phone competition... (62)
to General by catbus - 1 day, 18 hrs ago
Maemo-Leste pre-alpha announcement (512)
to Maemo 7 / Leste by nonsuch - 2 days, 20 hrs ago
The Intel RealSense Smartphone prototype (0)
to Competitors by n950 - 2 days, 22 hrs ago
Maemo Leste Playground (57)
to Maemo 7 / Leste by clort - 3 days, 19 hrs ago
A Palm OS thread ... and a thank you to the community (23)
to Alternatives by bradvesp - 4 days, 19 hrs ago
more...

Page 20 of 109

Thread Tools

	Schturman	2010-02-11 , 17:03
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#191

Originally Posted by b666m

that's a thing of the .js file, not html or css i think.
have you changed something there?

there you have multiple ways:
add margin-left / -right to div.Message.Self / .Other or the other way around to span.MessageTimeStamp.Self / .Other
(that would be the easiest way. you could do it via html too, but that's not so comfortable)

you can always have a look at the html-file. there you will see id= which you can ignore and after that some class-values class=.
for example:
<div> ... class = MessageTimeStamp Other ... </div>
you can use in the css:
div.MessageTimeStamp for both timestamps (self and other because you didn't specify one) or div.MessageTimeStamp.Other for the contact's timestamp (just link the classes with a full-stop in between ^^)

EXAMPLE:

in the html:
Code:
<span id="MessageSenderNameSelf" class="MessageNameField AccentColor2 Self"></span>
so you can add in the css:
Code:
span.MessageNameField.Self {
  color=#0234AB;
...
}
first of all just have a look at the html-classes for im-conversation again:
Code:
<div class="MessageAvatar MessageAvatarSelf"><div id="AvatarImgBorderSelf" class="MessageAvatarBorder Self MessagingAvatarBorderColor"></div>
then you can specify per full-stop-linking:
Code:
div.MessageAvatar {
...
  -moz-outline-radius: 6px;
}

Hi.
Thanks.
1) I dont changing my .js file...
2) I fixed the date and time, thanks

3) and 4) I tried but I do something wrong... After replacing the files, I get the black screen in the conversation

Can you see my files and change them please ? 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-11 , 17:36
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#192

Originally Posted by Schturman

Hi.
Thanks.
1) I dont changing my .js file...

mhm... afaik the .js-file is responsible for the order of the messages. html- and css-files are only responsible for the look of a single message.

2) I fixed the date and time, thanks

cool

3) and 4) I tried but I do something wrong... After replacing the files, I get the black screen in the conversation

3) oh... there is no "Self" and "Other" in the "MessageNameField" class. so you have to add these two for specifying .MessageNameField.Self and .Other.

3) + 4) don't ask my why but sometimes it seems like the placement of the commands is very important. had this issue a few times. i normally add my own lines of code at the bottom/end of the blocks (to undo it easily when something doesn't work the way it should ^^). but anyhow it didn't work. so i changed the position of my code to the top of the block and tada - it's working.
so you may want to play around a bit with positioning. and you may want to play around with these commands in different classes.

Quote & Reply |

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

	Schturman	2010-02-11 , 18:22
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#193

Thanks I try again...
for the AccentColor2 you mean the code of the color ? something like #0234AB ?

Ok I get the color

Last edited by Schturman; 2010-02-11 at 18:28.

Quote & Reply |

	b666m	2010-02-11 , 19:06
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#194

Originally Posted by Schturman

Thanks I try again...
for the AccentColor2 you mean the code of the color ? something like #0234AB ?

all these tags after class = are just assignments for the css-file.

an example in four steps:

Code:

id="MyName" class="Name Color1 My"
id="YourName" class="Name Color2 Your"
id="Something" class="Bla Color1"

1. so you can edit the options of "MyName" by adding a block .Name.My { ... }
2. you can edit the options for "Yourname" by adding a block .Name.Your { ... } or short Color2 { ... } because this class is unique.
3. but if you use .Color1 { ... } you WILL change the options for "MyName" AND "Something" within one block

4. if you just want to edit "Something" (without editing "MyName") you have to use .Bla { ... } and CAN'T use .Color1 { ... }

but you can edit EVERYTHING within each block no matter how it's named. so .Color1 { ... } isn't just responsible for colors. it is responsible for color, alignment, size, look, etc. ^^

(in short: it doesn't matter how these classes are named. you just have to look at the html and what these names are containing in the layout.)

EDIT: if you have your name and the name of your contact but you can't distinguish them by the classes they are in:

Code:

id="MyName" class="Name"
id="YourName" classe="Name"

you can add a class value to distinguish them:

Code:

id="MyName" class="Name Meee"
id="YourName" class="Name Youuu"

that's the easiest solution because you can use following in the css:

Code:

.Name { if you want to edit both Names at the same time }
.Name.Meee { if you only want to edit MyName }
.Name.Youuu { if you only want to edit YourName }

and you don't have to change anything else in the css.

The other way would be to rename the classes in the html-file:

Code:

id="MyName" class="MeeeName"
id="YourName" class="YouuuName"

then you can't edit both names with only one block like above.
and you would have to edit the complete css-file for changing the old block-names to the new ones.
SO: DON'T USE THIS WAY! ^^

Last edited by b666m; 2010-02-11 at 19:17.

Quote & Reply |

The Following 2 Users Say Thank You to b666m For This Useful Post:
Amboss, Schturman

	qole	2010-02-11 , 19:24
	Moderator \| Posts: 7,109 \| Thanked: 8,820 times \| Joined on Oct 2007 @ Vancouver, BC, Canada	#195

Originally Posted by Schturman

1) I open the IM conversation and the messages jumping to the first message (not to the last like the SMS conversation).

I'm getting that too since I switched to the IM bubble theme...

__________________
qole.org --- twitter --- Easy Debian wiki page
Please don't send me a private message, post to the appropriate thread.
Thank you all for your donations!

Quote & Reply |

	Schturman	2010-02-11 , 20:00
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#196

Originally Posted by b666m

all these tags after class = are just assignments for the css-file.

an example in four steps:
Code:
id="MyName" class="Name Color1 My"
id="YourName" class="Name Color2 Your"
id="Something" class="Bla Color1"
1. so you can edit the options of "MyName" by adding a block .Name.My { ... }

Thanks
I do it with this line (for other too):

Code:

<span id="MessageSenderNameSelf" class="MessageNameField #4169E1 Self"></span>

And in the CSS file:

Code:

span.MessageNameField.Self {
  color:#4169E1;
  word-wrap: break-word;
  vertical-align: middle;
}

span.MessageNameField.Other {
  color:#FF0000;
  word-wrap: break-word;
  vertical-align: middle;
}

Now it's work

(if I want to change color, I need change both html and css files ? I'll right ?)

Now I'll try to get the round corners on the avatar

...

Originally Posted by qole

I'm getting that too since I switched to the IM bubble theme...

We need found the solution

Last edited by Schturman; 2010-02-11 at 20:02.

Quote & Reply |

	b666m	2010-02-11 , 20:07
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#197

Originally Posted by Schturman

Thanks
I do it with this line (for other too):
Code:
<span id="MessageSenderNameSelf" class="MessageNameField #4169E1 Self"></span>

you don't have to add #4169E1 in the html-file

(if I want to change color, I need change both html and css files ? I'll right ?)

nope.
html is just for positioning and css for style, size, color and so on. ^^

Now I'll try to get the round corners on the avatar ...

that's a little bit tricky if your looking closely on your screen.
but from far away it's done quickly.

We need found the solution

don't know why this is happening. maybe there's something odd in your js-file?!

Quote & Reply |

	Schturman	2010-02-11 , 20:22
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#198

Originally Posted by b666m

you don't have to add #4169E1 in the html-file

Ok, thanks. now I understand, I change this to color1 and color2 in the html-file

Now I again tried to change this line:

Code:

<div class="MessageAvatar"><img id="AvatarImgSelf" src="" class="MessageAvatar" />
</div>

for you line:

Code:

<div class="MessageAvatar MessageAvatarSelf"><div id="AvatarImgBorderSelf" class="MessageAvatarBorder Self MessagingAvatarBorderColor"></div>

I getting the black screen in conversation

Last edited by Schturman; 2010-02-11 at 20:26.

Quote & Reply |

	b666m	2010-02-11 , 20:35
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#199

you normally don't have to change anything in the html-file.
most classes are unique due to class value .Self and .Other.

but i think you don't want to distinguish between your and the other's avatar. so leave the html just like it is now.

you only have to edit the css-file.

but i don't get it because there are already some lines for round corners of the avatars in the im-conversation by default:

Code:

img.MessageAvatar { 
...
  outline-style: solid; 
  outline-width: 3px; 
  outline-offset: -1px; 
  -moz-outline-radius: 6px; 
}

and

Code:

div.MessageAvatarBorder { 
...
  -moz-border-radius: 6px; 
  border-width: 1px;
  border-style: solid;
}

there should already be 6px rounded corners at the im-avatars?!

on my phone i have im-avatars with round corners. (ok 6px is not that big and you have to look a little bit closer xD). so you may want to use a value higher than 6px.

Quote & Reply |

	Schturman	2010-02-11 , 21:30
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#200

Wow, thanks !!! Now I got what I want

Another question...

from this post:

Originally Posted by qole

Hi All,

I'm using Reflektorfalke's bubble mod for my IM conversations, because I like the way it resizes to match the length of the text, but the conversation tends to get a bit messy when there are several small messages.

Does anyone have a fix for this? Some way to reserve the whole width of the screen for each message, without the bubble filling the whole width?

I have this problem too and If I changing this in the css file to:

Code:

div.Message {
  min-width: 400px;
  ...
}

It's looking nice but with this change I got another problem. On the some messages my avatar jumping to below to my bubble

Any idea ?

Quote & Reply |

Page 20 of 109