Customize N900 Conversations - Page 49 - maemo.org

Active Topics

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

Page 49 of 110

Thread Tools

	niqbal	2010-04-02 , 18:26
	Posts: 474 \| Thanked: 368 times \| Joined on Jan 2010	#481

Originally Posted by b666m

after hours of troubleshooting the only thing that doesn't work is the other's avatar on the right side... i didn't even change anything to the alignment of it.. it suddenly was there xD
"float: right;" and "text-align: right;" don't work at all... -.-

i can indent the bubbles left/right and put/remove gaps between the bubbles... but i'll show the default layout:

it looks nice, happening layout. kind of strange, had the same issue during last layout when i were adapting to dynamic bubble width. float:right should work. make sure your html has div avatar before div message for Other.

Quote & Reply |

The Following User Says Thank You to niqbal For This Useful Post:
torres76

	b666m	2010-04-02 , 18:36
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#482

Originally Posted by niqbal

it looks nice, happening layout. kind of strange, had the same issue during last layout when i were adapting to dynamic bubble width. float:right should work. make sure your html has div avatar before div message for Other.

check. ^^

i can put it on the right side via float, but then my bubbles are getting messed up -.-

Quote & Reply |

byte_76	2010-04-02 , 21:32
Posts: 120 \| Thanked: 33 times \| Joined on Jan 2010	#483

Originally Posted by b666m

check. ^^

i can put it on the right side via float, but then my bubbles are getting messed up -.-

Can you be more specific about what you mean by messed up?

Quote & Reply |

byte_76	2010-04-02 , 21:41
Posts: 120 \| Thanked: 33 times \| Joined on Jan 2010	#484

What I did to gain more control over the avatars was to separate the divs by copying the existing Avatar div and creating a new div called AvatarOther. Then, of course doing the same thing in the CSS file.
After that I reordered the divs in the html file so that the AvatarOther div is before the bubble and floated both the bubble and AvatarOther to the right in the CSS file.

Quote & Reply |

	Schturman	2010-04-03 , 00:46
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#485

Hi
I did this one for IM, but I can't fix the big gap between the bubbles... Any Ideas ?
Thanks

Code:

/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  background-color:#000000;
  vertical-align:middle;
  margin-left: 12px;
  margin-right: 12px;
}

div.BubbleSelf {
    background-color:#600000;
    text-shadow:black 3px 2px 5px;
      text-align: right;

      position: relative;
      z-index: 2;

      -moz-border-radius-topleft: 30px;  /*** making your own borders ***/
      -moz-border-radius-bottomright: 30px;
      -moz-border-radius-bottomleft: 30px;

    border-style:solid;
    border-width: 2px;
    border-color:#696969;

      margin: 58px -17px 4px -15px;

    max-width: 636px;
      min-height: 56px;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 8px;
}

div.BubbleOther { 
  background-color:#2F4F4F;
  text-shadow:black 3px 2px 5px;
  text-align: right;

  position: relative;
  z-index: 2;

  -moz-border-radius-topright: 30px;  /*** making your own borders ***/
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;

  border-style:solid;
  border-width: 2px;
  border-color:#696969;

  margin: 58px -15px 4px -17px;

  max-width: 636px;
  min-height: 56px;
  display: inline-block;
  vertical-align: middle;
  padding: 4px 8px;
  line-height: 130%;
}

div.InnerBubble {
    max-width: 614px;
    display: inline-block;
    vertical-align: middle;
}

div.Message {
  margin-top: -40px;
  clear: both;
  display: block;
}

div.MessageSelf { 
  vertical-align:middle;
  margin-top:   8px; 
  margin-left:  0px;
  margin-right: 0px;
  min-width: 400px;
  float:right;
}

div.MessageOther { 
  vertical-align:middle;
  margin-top:   8px; 
  margin-left:  0px;
  margin-right: 0px;
  min-width: 400px;
  float:left;
  text-align: left;
}

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


/**
 * The Message notice message format
 */
div.MessageNormal.Self { 
  text-align: right;
  vertical-align: middle;
}

div.MessageNormal.Other { 
  text-align: left;
  vertical-align: middle;
}

div.MessageNotice {

}

div.MessageAction {

}

div.MessageAutoReply {

}



/**
 * Avatars
 */
img.MessageAvatar { 
  width: 64px;
  height: 64px;
  outline-style: solid; 
  outline-width: 5px; 
  outline-offset: -1px; 
  -moz-outline-radius: 14px; 
  vertical-align: top; 
}

div.MessageAvatar { 
  width: 64px;
  height: 64px;
  -moz-border-radius: 10px; 
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: top;
}

img.MessagePresence { 
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/**
 * the Name field
 */
span.MessageNameField.Self {
  color:#4169E1;
  font-size:30px;
  padding-bottom: 5px;
  word-wrap: break-word;
  vertical-align: middle;
}

span.MessageNameField.Other {
  color:#FF0000;
  font-size:27px;
  padding-bottom: 2px;
  word-wrap: break-word;
  vertical-align: middle;
}


/**
 * the Text field
 */
.MessageText { 
  word-wrap: break-word;
  vertical-align: middle;
  color: #FFC04D;
}

/**
 * the NameSeparator field
 */
.MessageNameSeparator { 
}


span.MessageRight {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  text-align: left;
  float: left;
}

/**
 * the TimeStamp default rules
 */

span.MessageTimeStamp.Self {
  white-space: nowrap;
  vertical-align: middle;
  padding-top: 12px;
  margin-top:   8px; 
  margin-left:  -6px;
  margin-right: 10px;
  color: #87CEEB;
}

span.MessageTimeStamp.Other {
  white-space: nowrap;
  vertical-align: middle;
  padding-top: 6px;
  margin-top:   8px; 
  margin-left:  -6px;
  margin-right: 10px;
  color: #87CEEB;
}

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

/* Theme selector */
.ThemeSelector {
  position: fixed;
  width: 515px;
  bottom: 0px;
  left: 130px;
}

.ThemeItem {
  padding: 0px;
  border: 2px solid;
  border-color: #ccc;
  display: inline;
}

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

Last edited by Schturman; 2010-04-03 at 01:11.

Quote & Reply |

maurelio79	2010-04-03 , 01:01
Posts: 75 \| Thanked: 9 times \| Joined on Dec 2009 @ Verona, Italy	#486

But for bubbles there is

margin: 58px -15px 4px -17px;

is a 58px margin-top....

Quote & Reply |

	Schturman	2010-04-03 , 01:16
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#487

Yes I know.. It's because I want the right-top corner of bubble over the left-bottom corner of avatar.
It is the same in the SMS and we have fixed gap by b666m (see my pic).
And I want the same on the IM conversation...

Quote & Reply |

byte_76	2010-04-03 , 07:35
Posts: 120 \| Thanked: 33 times \| Joined on Jan 2010	#488

Originally Posted by Schturman

Yes I know.. It's because I want the right-top corner of bubble over the left-bottom corner of avatar.
It is the same in the SMS and we have fixed gap by b666m (see my pic).
And I want the same on the IM conversation...

Attach all the files so that we can try to help!

Quote & Reply |

	b666m	2010-04-03 , 08:47
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#489

Originally Posted by byte_76

Can you be more specific about what you mean by messed up?

there are two ways (depends on where i put the float-right):

1.
- avatar is top-right (where i want it to be).
- text gets moved under the avatar (where it shouldn't be).
- message bubble (grey) expands the whole size?!

2.
- avatar is anywhere else in between of the text.
- text and bubbles totally dearranged

i don't want to try anymore. css is driving me crazy at this point. ^^

and it seems that nobody really wants to have a new layout like this one.

i could post the code/ upload the files if somebody wants to take a look at it. but this one isn't easy to understand because of one new layer before the bubble and having these two layers aligned to the message-block which i colored for this mod too. (took me 3 hours for having this layout ^^)