Who’s who on Twitter

Twitter Styles

Jeff Barr posted a lazy web request for a better view of Twitter contacts and Wes Maldonado responded with a slick Greasemonkey script.

Well, not to be outdone by the scripting folks, I made two similar scripts for , a Firefox plugin that allows you to apply custom CSS on certain webpages (see what I did for Tangler a couple days ago).

To apply these styles, install the extension and then add either of these styles to Twitter.com:

No avatars

  1. @-moz-document domain("twitter.com") {
  2. #friends {margin-top: 12px;}
  3. #friends a[rel=contact] {display:block;text-decoration: none !important;margin-bottom:3px;}
  4. #friends a[rel=contact] img {display:none;}
  5. #friends a[rel=contact]:after {content: attr(title);}
  6. }

With avatars

  1. @-moz-document domain("twitter.com") {
  2. #friends a[rel=contact] {display:block;text-decoration: none !important;margin-bottom:3px;}
  3. #friends a[rel=contact] img {margin-right: 3px; text-decoration: none !important;}
  4. #friends a[rel=contact]:after {content: attr(title);}
  5. }

5 Comments

  1. Posted Feb 16th at @ 5pm | Permalink

    Wow, great!
    This was badly needed! Thanks!

  2. rabble
    Posted Feb 16th at @ 5pm | Permalink

    It was both badly needed, and it used to be there. I have never understood why they made it so hard to list contacts. It used to be clear and easy to read. Almost exactly like how you’ve redone it to look.

  3. Posted Feb 19th at @ 9am | Permalink

    Thanks Chris, makes it far easier to see who is who

  4. Posted Mar 5th at @ 1am | Permalink

    I can’t seem to extract CSS from your code for Firefox’s Stylish so that I may implement this in Safari with Stand.
    I must be an idiot :-)
    Can you reduce it to simple CSS for me?
    Thanks!

  5. Posted Mar 5th at @ 1am | Permalink

    never mind.
    I’m not an idiot. Safari was chaching the stylesheet and not applying mine.
    Thanks! This is just what twitter needed!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*