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. Luke Dorny said
    at 5pm on Feb 16th # |

    Wow, great!
    This was badly needed! Thanks!

  2. rabble said
    at 5pm on Feb 16th # |

    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. Rachel said
    at 9am on Feb 19th # |

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

  4. Tayor said
    at 1am on Mar 5th # |

    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. Tayor said
    at 1am on Mar 5th # |

    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 *

*
*