maemo.org - Talk
Page 49 of 109 « First 394748 49 505159 Last »
Show 40 post(s) from this thread on one page

maemo.org - Talk (https://talk.maemo.org/index.php)
-   Maemo 5 / Fremantle (https://talk.maemo.org/forumdisplay.php?f=40)
-   -   Customize N900 Conversations (https://talk.maemo.org/showthread.php?t=36618)

niqbal 2010-04-02 18:26
Re: Customize N900 Conversations
 
Quote:
Originally Posted by b666m (Post 592832)
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.

b666m 2010-04-02 18:36
Re: Customize N900 Conversations
 
Quote:
Originally Posted by niqbal (Post 592906)
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 -.-

byte_76 2010-04-02 21:32
Re: Customize N900 Conversations
 
Quote:
Originally Posted by b666m (Post 592914)
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?

byte_76 2010-04-02 21:41
Re: Customize N900 Conversations
 
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.

Schturman 2010-04-03 00:46
Re: Customize N900 Conversations
 
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;
}

maurelio79 2010-04-03 01:01
Re: Customize N900 Conversations
 
But for bubbles there is

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

is a 58px margin-top....

Schturman 2010-04-03 01:16
Re: Customize N900 Conversations
 
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...

byte_76 2010-04-03 07:35
Re: Customize N900 Conversations
 
Quote:
Originally Posted by Schturman (Post 593347)
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!

b666m 2010-04-03 08:47
Re: Customize N900 Conversations
 
Quote:
Originally Posted by byte_76 (Post 593119)
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 ^^)

Kurele 2010-04-03 09:19
Re: Customize N900 Conversations
 
Hello all!

I edited niqbal's Convo UI a bit and this is my end result
I also used some of byte_76's HTML (Thanks!)

http://shermantj.selfip.com/online/M...403-025740.png

http://shermantj.selfip.com/online/M...403-025759.png

If you find any bugs please let me know!

By the way, My characters remaining box is messed up because of my font, not because of this :)

Edit: lol wow i forgot the link...

Get it here


All times are GMT. The time now is 04:59.
Page 49 of 109 « First 394748 49 505159 Last »
Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8