Thread: Customize N900 Conversations
View Single Post
kamiwey's Avatar
kamiwey is offline kamiwey
2010-07-24 , 20:01
Posts: 121 | Thanked: 100 times | Joined on Jun 2010
#727
Originally Posted by niqbal View Post
@robe11

hmm is this what you had in mind? i DO NOT like it myself but here it is. to add your own name, edit .js file. Put your own name instead of mine

Code:
//niqbal code
    if (!item.self) {
        var name = item.name_str.split(":")[0];
        name = name.split(" ")[0];
        name_tag.textContent = name;
    }
    else{
        name_tag.textContent = "your_name_goes_here";

    }
//niqbal code
hello niqbal, i like this style, im trying to make my own but untill now i can not get it like i want and i would like you or somebody can guide me in some questions.

1,- i would like to have the bubbles like you, but i want the corner go out from a side not up cuz i have the avatar picture beside the bubble.
2.- im trying to get diferents colours for my letters and the other person letters, but untill now i can not get it.
3.- i want to know how to can use a picture or wallpaper as background and how to put also in the bubbles cuz maybe i put some, or if there is any way to can get bubbles translucid or little transparents.

this is my css for if somebody can tell me what i need to change.

Code:
 /**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  margin-left: 8px;
  margin-right: 8px;
}

/**
 * The table column formats
 */

div.Message {

  font-size: 30px;

  padding-bottom: 8px;
  clear:	  both;
  display:        block;
  padding-left: 8px;
}

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

div.Message:last-child {
  padding-bottom: 0px;
}

div.BubbleSelf {
  
  text-shadow:grey 3px 2px 5px;

  opacity: 1;

  position: relative;
  z-index: 2;
 

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  
  background: #282828;
  text-shadow:black 3px 2px 5px;

  opacity: 1;

  position: relative;
  z-index: 2;

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  
  margin-left: 70px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSpacer {
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
  display: table-cell;
  width: 664px;
  max-width: 664px;
  height: 52px;
}

div.BubbleSelfClicked {

  text-shadow:grey 3px 2px 5px;

  opacity: 1;  

  position: relative;
  z-index: 2;

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;

  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 616px;
  min-height: 56px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  text-shadow: 0.1em 0.1em #000;

  vertical-align: middle;
  padding: 4px 8px;
  margin-left: 70px;

  display: inline-block;
  width: 616px;
  min-height: 56px;
  /* 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: 64px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 64px;
  height:64px;
  outline-style: solid;
  outline-width: 1px;
  -moz-outline-radius: 6px;
}

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 {
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
}

span.MessageTextSelf {
  text-align: left;
  vertical-align: middle;
  color: #FFFFFF;
  word-wrap: break-word;
}

span.MessageTextOther {
  text-align: left;
  vertical-align: middle;
  color:blue;
  word-wrap: break-word;
}

/**
 * the TimeStamp default rules
 */
div.MessageRight {
  float: right;
  padding-left: 16px;
  white-space: nowrap;
  text-align: right;
  display: inline-block;
}

img.MessageBusinessCardImg {
  vertical-align: middle;
  padding-right: 4px;
}

img.MessageStatusImg {
  vertical-align: middle;
  padding-right: 8px;
}

.MessagingWidgetsSmiley {
  height: 24px;
  width: 24px;
}
well, i hope i explain it good cuz my english is not very good.
thanks in advance and kind regards.