New Twitter Design and CSS Customization
by Stuart Robertson on September 18th, 2008 | Social Media
Twitter has updated with a new design that’s mostly cosmetic changes – the most noticeable of which is that the tabs at the top of the timeline have been moved to the right-hand sidebar. This makes room for new tabs which will introduced sometime in the near future.
However, what I found most interesting about the updated design wasn’t the visual differences. There is also one important coding change: each tweet now has html you can use to identify it and control it’s formatting with CSS.
As with the previous design, each tweet is on a separate table row ( a TR tag). What’s different with this version is that each table row uses a class name that matches the user ID of the person making that tweet.
<tr id="status_926621322" class="hentry designmeme">
This means you can now use Greasemonkey or a user stylesheet to add CSS to specific twitter users.
Have someone you don’t want to miss?
tr.designmeme { background:#fc0; color:#333; }
Or perhaps someone who’s posting to Twitter just a little too often at the moment—but you don’t want to take the step of unfollowing them.
tr.mrchatterbox { display:none; } /* The Tweet Sweeper */
There’s nothing to see 
Or just about any other change you might want to make on a user-by-user basis.
tr.designmeme td.thumb a { overflow:hidden; display:block;}
tr.designmeme td.thumb a img { padding-left:48px; background:url("http://someurl.com/upgrayedd.jpg");}
So while the new Twitter might not look like that much of a change at first… I’m very pleased with the changes that were made, and looking forward to seeing all the customizations that will follow. 
If you’ve got some ideas for customizations please leave a comment, or get in touch with me on Twitter.
Upddate Sept 19, 2008
Shortly after writing this post it looks like Twitter was downgraded slightly and the necessary classes were removed from the TR tags. Since there are already a number of 3rd party Twitter clients that change the appearance of the content in Twitter, I don’t think that had anything to do with users doing CSS customizations for their personal viewing of Twitter. I’m guessing there’s some technical reason why they couldn’t include them, but I haven’t heard back from @ev about what happened yet.
In the meantime I wrote a user script for greasemonkey that will add the username as a class on the TR tag of each Twitter post. If you run the script, the CSS customizations mentioned above will continue to work. Keep in mind this is just adjusting your personal view of Twitter, and not changing the experience for other users.
Stuart Robertson
Stuart Robertson on September 19, 2008 at 10:32 am
If you are following someone who makes multiple Tweets in rapid succession, and you’d rather not see that… you could use the following CSS to show only their most recent of the posts and minimize the previous posts until you mouse over them to show their contents.
tr.designmeme + tr.designmeme td * { display:none; }
tr.designmeme + tr.designmeme td.author:before { content:’etc’;color:#666;font-size:9px;font-style:italic; }
tr.designmeme + tr.designmeme:hover td * { display:inline; }
tr.designmeme + tr.designmeme:hover td.author:before { content:’‘; }
Feeds | ZDNet.com on September 19, 2008 at 2:25 pm
Dario Salvelli's Tumblr on September 24, 2008 at 7:22 am
Anidan Design » Web Design, Wordpress Customization, PSD 2 CSS/XHTML on September 25, 2008 at 10:01 pm
Daily Design Links for 9-25-08 » Anidan Design on September 26, 2008 at 10:14 pm
[...] New Twitter Design and CSS Customization | Design Meme (tags: twitter css customization) [...]
New Twitter Design and CSS Customization | Design Meme - FriendFeed on November 29, 2008 at 11:49 pm
Revenue Robot | Add Twitter to your site with Custom CSS on December 29, 2008 at 8:35 pm
[...] New Twitter Design and CSS Customization [...]