Page 49 of 109 « First 394748 49 505159 Last »
Reply
Thread Tools
niqbal's Avatar
niqbal is offline niqbal
2010-04-02 , 18:26
Posts: 474 | Thanked: 368 times | Joined on Jan 2010
#481
Originally Posted by b666m View Post
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.
 

The Following User Says Thank You to niqbal For This Useful Post:
b666m's Avatar
b666m is offline b666m
2010-04-02 , 18:36
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#482
Originally Posted by niqbal View Post
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 is offline byte_76
2010-04-02 , 21:32
Posts: 119 | Thanked: 32 times | Joined on Jan 2010
#483
Originally Posted by b666m View Post
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 is offline byte_76
2010-04-02 , 21:41
Posts: 119 | Thanked: 32 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.
 
Schturman's Avatar
Schturman is offline 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.
 
maurelio79 is offline 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....
 
Schturman's Avatar
Schturman is offline 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...
__________________
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.
 
byte_76 is offline byte_76
2010-04-03 , 07:35
Posts: 119 | Thanked: 32 times | Joined on Jan 2010
#488
Originally Posted by Schturman View Post
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's Avatar
b666m is offline b666m
2010-04-03 , 08:47
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#489
Originally Posted by byte_76 View Post
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's Avatar
Kurele is offline Kurele
2010-04-03 , 09:19
Posts: 79 | Thanked: 27 times | Joined on Jan 2010 @ Colorado
#490
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!)





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
__________________
[~Nokia N900~]
[Clocked to 900mhz]
[Kurele..... ]
My Site and Blog
Last edited by Kurele; 2010-04-03 at 21:58.
 
Reply
Page 49 of 109 « First 394748 49 505159 Last »

Tags
bada rox, his lunchbox

« Previous Thread | Next Thread »
Thread Tools

 
Forum Jump


All times are GMT. The time now is 15:25.

Contact Us - Home - Archive - Top