New Twitter Design and CSS Customization
Posted by Stuart Robertson | Social Media
Image via CrunchBase
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.
You might also like
|
|
|
|
|
Stuart Robertson is a Freelance Web Designer and Consultant, the Web Manager for the University of Guelph, and Faculty in the Department of Media Studies at the University of Guelph-Humber.
September 19, 2008 at 2:25 pm
photos or videos of their pirate imitations. If you want to follow me over there and join us for some pirate speak I am currently “Walk the Plankifer Leggio.” What do YOU think of the new designs? Update 9/19/08 8:16 a.m.: Stuart Robertson atDesign Memewrote about some CSS customization that the new Twitter design allows and posted a greasemonkey script for doing such.
September 25, 2008 at 10:01 pm
New Twitter Design and CSS Customization | Design Meme
September 24, 2008 at 7:22 am
How to customize Twitter CSS
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:”; }
September 26, 2008 at 10:14 pm
[...] New Twitter Design and CSS Customization | Design Meme (tags: twitter css customization) [...]
November 29, 2008 at 11:49 pm
[...] sign in to get started « Back to Jennifer’s feed posted a link New Twitter Design and CSS Customization | Design Meme September 19 at 8:13 am – via Bookmarklet – Link ©2008 FriendFeed – About – Blog – [...]
December 29, 2008 at 8:35 pm
[...] New Twitter Design and CSS Customization [...]
February 2, 2009 at 3:40 am
list all elders quots of medical insurence greatlakes company u s…
sulk dreading bimolecular hearten excruciate,bartered …
February 5, 2009 at 2:34 pm
[...] to create this post to share with others who are searching for similar if not the same thing. New Twitter Design and CSS Customization What is CSS and how can I edit it to customize my badge? A Resizable CSS-based Twitter Site Badge [...]