View Single Post
Schturman's Avatar
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;
}

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