Active Topics
-
The N900 is now 15 years old! (8)
to Nokia N900 by whayong - 1 hr, 7 mins ago -
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (4)
to SailfishOS by Maemish - 4 days, 21 hrs ago - more...
 |
|
2010-02-26
, 16:25
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#312
|
Originally Posted by Schturman
as i said... move the timestamp-div-block in the html file below the message-text-block.
I change the"float: left;" to "float: right;"... Timestamp jump to the right, in front of the name, but not below the name... It stayed on the same line and move the name to left.
How I can get this time&date below the name (another line) ?
Thanks
if this doesn't work immediately you can add a margin-left line with a value of the bubble-width to make a break via css. ^^
| The Following User Says Thank You to b666m For This Useful Post: | ||
|
|
2010-02-27
, 12:31
|
|
Posts: 276 |
Thanked: 109 times |
Joined on Dec 2009
@ Vancouver,Canada / Dubai,UAE
|
#313
|
Originally Posted by b666m
That is looking Awesome ,reminds me of my nokia 7610 design
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)
The right portion can be more pointy same as the left portion of the txt msg bubble and then it would be perfect .
Can anyone do the coding/modding and zip it and upload it same as the one b666m did already on the page 4 ?
Cheers
 |
|
2010-02-27
, 12:55
|
|
Posts: 5,339 |
Thanked: 4,133 times |
Joined on Jan 2010
@ Israel
|
#314
|
I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages. 
Code:
<span id="MessageTextSelf" class="MessageText Self"></span>
<span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>
<span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span>
<div class="MessageRight Self">
__________________
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.
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.
|
|
2010-02-27
, 13:06
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#315
|
Originally Posted by Schturman
I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages.
Code:
<div id="MessageTextSelf" class="MessageText Self"></div>
<span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>
<span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span>
<div class="MessageRight Self">
div adds a new break (after the /div !!!). span only groups things.
| The Following User Says Thank You to b666m For This Useful Post: | ||
|
|
2010-02-27
, 13:10
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#316
|
Originally Posted by SR90
if Schturman uploads his current sms-layout as shown in his screenshots i could edit those few lines.
That is looking Awesome ,reminds me of my nokia 7610 design
The right portion can be more pointy same as the left portion of the txt msg bubble and then it would be perfect .
Can anyone do the coding/modding and zip it and upload it same as the one b666m did already on the page 4 ?
Cheers
(i don't want to do all the work on my own to get these results xD)
| The Following User Says Thank You to b666m For This Useful Post: | ||
|
|
2010-02-27
, 13:39
|
|
Posts: 5,339 |
Thanked: 4,133 times |
Joined on Jan 2010
@ Israel
|
#317
|
Originally Posted by b666m
div and span are for block-building.Code:<div id="MessageTextSelf" class="MessageText Self"></div> <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span> <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span> <div class="MessageRight Self">
div adds a new break (after the /div !!!). span only groups things.
Haaaa, Thanks ! I forgot about it
I try this later...
Originally Posted by SR90
Here is my files for this picture:That is looking Awesome ,reminds me of my nokia 7610 design
The right portion can be more pointy same as the left portion of the txt msg bubble and then it would be perfect .
Can anyone do the coding/modding and zip it and upload it same as the one b666m did already on the page 4 ?
Cheers
But this files edited for right to left for hebrew language, I do not think it will suit you
__________________
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.
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.
|
|
2010-02-27
, 13:45
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#318
|
Originally Posted by Schturman
thanks
But this files edited for right to left for hebrew language, I do not think it will suit you
np... i won't touch neither the js-file nor the html-file ^^
and the css-file should just be responsible for the style. so i think it'll work out for everyone.
but i'm going to test that right now
edit: ok, you're right... the style looks great... the alignment isn't the same... so i guess i'll have to make some patchwork *G*
Last edited by b666m; 2010-02-27 at 13:52.
|
|
2010-02-27
, 16:09
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#319
|
first attempt:
looks good for own messages
don't get the other's avatar and message aligning to the right side and the space between bubble and avatar is strange too :/
but i'll keep trying
(btw: i used the direction-command you used in your html. but there i have some problems with text-wrapping and so on :/)
ahhh... nearly forget the image xD
looks good for own messages
don't get the other's avatar and message aligning to the right side and the space between bubble and avatar is strange too :/
but i'll keep trying
(btw: i used the direction-command you used in your html. but there i have some problems with text-wrapping and so on :/)
ahhh... nearly forget the image xD
| The Following User Says Thank You to b666m For This Useful Post: | ||
|
|
2010-02-27
, 17:42
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#320
|
update:
alignment to the right side is ok.
after some problems with the alignment of the own avatar and messages it all looks pretty good.
but i don't have any clue why there are gaps between bubbles and avatars again.... -.-'
edit:
that's the code so far:
Last edited by b666m; 2010-02-27 at 17:52.
alignment to the right side is ok.
after some problems with the alignment of the own avatar and messages it all looks pretty good.
but i don't have any clue why there are gaps between bubbles and avatars again.... -.-'
edit:
that's the code so far:
Code:
/**
* Style rules for the MessageBuffer
*/
/**
* the body defaults
*/
body {
padding: 0px 16px;
margin: 0px;
}
/**
* The table column formats
*/
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 {
background: #600000;
text-shadow:black 3px 2px 5px;
-moz-border-radius-topright: 30px;
border-style: solid;
border-width: 2px;
margin: 4px 0px;
padding: 8px;
display: inline-block;
min-height: 44px;
max-width: 620px;
/* overflow: hidden; this bugs mouse events. see bug #123077 */
}
div.BubbleOther {
background: #2F4F4F;
text-shadow:black 3px 2px 5px;
-moz-border-radius-topleft: 30px;
border-style: solid;
border-width: 2px;
margin: 4px 0px;
padding: 8px;
display: inline-block;
min-height: 44px;
max-width: 620px;
/* overflow: hidden; this bugs mouse events. see bug #123077 */
}
div.BubbleSelfClicked {
text-shadow:black 3px 2px 5px;
-moz-border-radius-topright: 30px;
border-style: solid;
border-width: 2px;
margin: 4px 0px;
padding: 8px;
display: inline-block;
min-height: 44px;
max-width: 620px;
/* overflow: hidden; this bugs mouse events. see bug #123077 */
}
div.BubbleOtherClicked {
text-shadow:black 3px 2px 5px;
-moz-border-radius-topleft: 30px;
border-style: solid;
border-width: 2px;
margin: 4px 0px;
padding: 8px;
display: inline-block;
min-height: 44px;
max-width: 620px;
/* 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 {
margin-top: 4px;
margin-right: 0px;
width: 60px;
height:60px;
-moz-border-radius-bottomleft: 30px;
border-width: 2px;
border-style: solid;
}
.MessageAvatar.Other {
margin-top: 4px;
width: 60px;
height:60px;
-moz-border-radius-bottomright: 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;
}
Last edited by b666m; 2010-02-27 at 17:52.
| The Following User Says Thank You to b666m For This Useful Post: | ||
 |
| Tags |
| bada rox, his lunchbox |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
All times are GMT. The time now is 02:38.
I tried to edit block placed below to the timestamp
div.MessageRight { float: left; padding-right: 10px; white-space: nowrap; text-align: left; display: inline-block; }How I can get this time&date below the name (another line) ?
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.