Recently Google started inserting Twitter posts into the search results for current “trending topics”. Apparently they, along with Microsoft, paid a handsome sum to bring this “feature” to the masses. While I’m glad this has made Twitter profitable as I am a Twitter user myself, I find the animated display of tweets in the results very annoying. The last thing I want when trying to read through the results is an eye-catching distraction.

So to take the matter into my own hands, I figured out a relatively easy way to remove the animated elements from the page. In Firefox, you can set custom Cascading Style Sheet (CSS) rules for any web site in a file called userContent.css. The file is located in the chrome folder in your profile, the location of which depends on the platform.

Once you’ve located the userContent.css file, just add the following lines to block the display of the elements used for the real time results animation:

@-moz-document url-prefix(http://www.google.com/search) {
#rtr {display: none !important;}
#sb {display: none !important;}
#rth {display: none !important;}
}

The first line indicates to which pages the CSS rules should be applied. The next lines block the display of the real time result (rtr) list, the scroll bar (sb), and pause link in the real time header (rth). Unfortunately there is no ID value for the markup that includes the “Latest results for [search term] – ” portion. I suppose I could get fancy with following the hierarchy of tags from a specific parent element with an ID, but I figure it’s just as well to leave the link there in case I am interested in seeing those results.

After making the change, you will need to restart the browser for it to take effect.

Apparently Safari also supports userContent.css files, though I’m not sure whether it supports site-specific rules.