Customizing Twitter with CSS

Posted on April 18, 2011

Twitter uses CSS in a very intelligent way. Due to the fact that this social network allows users to change the visual layout of their web pages, CSS styles must be handled in a per-user way. Basically, each Twitter user can customize his/her home page by changing colors and backgrounds, either by using the suggested schemes or using custom user schemes. This is achieved by simply binding a CSS class to the body element of the user home page:

<body class="browser user-style-someuser">
...
</body>

There are two CSS classes here:

  1. browser: a browser-specific class name used to handle browser discrepancies
  2. user-style-someuser: a user-specific class name used to allow for a user-based page customization.

This leads to another important consideration: users can radically customize the aspect of their home page by specifying a user style sheet in their browser and associating it to their Twitter home page. Thus, the structure will remain the same but the CSS layout will be completely different.

Bear in mind that if you want to use this feature, your user CSS rules must always have a greater specificity than author rules. So:

  1. always use !important
  2. use cascading and augment the specificity of your selectors: 
    
html body.user-style-someuser {

  background: url(mybg.png) repeat 0 0 !important;
  font: 100%/1 Arial, sans-serif !important;

}

User style sheets resources

Here are a few resources to help you with CSS user style sheets:

  1. How to create a user style sheet
  2. User style sheets examples

Leave a Reply

Note: Only a member of this blog may post a comment.