Sunday, January 15, 2012

Instantbird Contact List Hack #2

There was a request on the Instantbird Bugzilla to always show contacts in the contact list as the "big" contact (as shown when a contact is selected).  Similarly to my last post, this can easily be done with userChrome.css.  See the post if you don't know what userChrome.css is.

Again, we're simply going to always apply a specific CSS style to the contacts, namely we'll be modifying the behavior of blist.css.  I'm sure you don't really care about that and just want the code, well I'll oblige:

/* Expand all contacts to the big contact. */
contact {
  -moz-binding: url("chrome://instantbird/content/contact.xml#contact-big") !important;
  -moz-box-orient: vertical !important;
  -moz-box-align: stretch !important;
}
And that's it!  Restart Instantbird and you should always have big contacts.  I haven't seen any issues of using this (missing or wrong behavior), but of course your mileage might vary.  Have fun!
Posted by at
Labels: , ,

5 comments:

  1. In addition...

    group {
    font-size: 1em;
    background-color: #D6D6D5;
    }
    contact {
    font-size: 1.1em;
    font-weight: bold;
    overflow-y: inherit;
    background-color: #D6D6D5;
    }
    buddy {
    font-size: 1em;
    }

    And background-color values can be removed. It is just like my miranda im buddy list now. Everything gray! Only thing I'm missing is the user icons in the list.

    I wanted to ask from where you know the name of the classes so you can modify them? Maybe not so smart question but lack of documentation about those stuff draws me back.

    ReplyDelete
    Replies

    1. I looked at the source, of course! :-D

      Specifically http://lxr.instantbird.org/instantbird/source/instantbird/content/blist.xul and related: http://lxr.instantbird.org/instantbird/source/instantbird/content/contact.xml and http://lxr.instantbird.org/instantbird/source/instantbird/content/group.xml

      I'd also certainly suggest hopping on IRC if you have any questions (#instantbird on irc.mozilla.org).

      I'm glad you found this useful!

      Delete

  2. Facepalm! Of course the source, logical, when the project is open sourced, I knew it was not a smart question. Thank you very much for the info and the links! Lovely! I will jump to IRC channel for sure.

    ReplyDelete

  3. Thank to you I revamp the list totally. Starting to like instantbird more and more. Posting it here so others who find your blog to see it.

    New buddy list.
    1. Its expanded as in your example
    2. With gray background same as the UI color.
    3. When you hover or select a contact it becomes with blue background and white text, also expanding the buddy does the same color behaviour.
    4. Remembers the highlighted selected contact, while you hovering the others which also gets highlited.
    5. When you remove the mouse from that contact and hover another, 1st one gets black text on blue background, while still selected but not on focus, newly hovered one, focused contacts, gets white text.
    6. Also has bigger fonts.
    7. 1px rounded blue highlitght, makes it more smooth.
    ;)
    YEY for the open source software.

    /* Expand all contacts to the big contact. */
    contact {
    -moz-binding: url("chrome://instantbird/content/contact.xml#contact-big") !important;
    -moz-box-orient: vertical !important;
    -moz-box-align: stretch !important;
    }
    group {
    font-size: 1em !important;
    background-color: -moz-Dialog !important;
    }
    contact {
    font-size: 1.1em !important;
    font-weight: bold !important;
    overflow-y: inherit !important;
    background: -moz-Dialog;
    }
    contact[selected="true"] {
    border-radius: 3px !important;
    color: HighlightText;
    background: Highlight !important;
    }
    contact:not([selected="true"]) {
    background: -moz-Dialog !important;
    }
    contact:focus([selected="true"]) {
    background: -moz-Dialog !important;
    border-radius: 3px !important;
    }
    contact:hover{
    background: Highlight !important;
    color: HighlightText !important;
    border-radius: 3px !important;
    }
    buddy {
    font-size: 1em !important;
    background: Highlight !important;
    overflow-y: inherit !important;
    }
    conv {
    font-size: 1.1em !important;
    font-weight: bold !important;
    overflow-y: inherit !important;
    background: -moz-Dialog;
    }

    ReplyDelete

Subscribe to: Post Comments (Atom)