Minimalist UI for Twitter

There’s something about the new Twitter I just never liked. From the Promoted Suggested Users, to the Promoted Trending Topics, down to the actual Trending Topics, and the position of my follower/following account widget on the left-side of the window.

Before this morning, I mainly used Tweetdeck, but it’s been proving itself to be a resource hog, and loads so slow, I opted to give the web interface a whirl. In order to fully appreciate Twitter for what it does, I felt that it needed a little help. Following a queue from old colleague, Dru Kelly, about modifying the site using Firebug in Firefox, I decided to see what the options for a more “permanent” solution would be in Chrome.

Here’s the down & dirty for how to make the Twitter web interface cleaner and leaner.

Step 1: Chrome Extension, Stylebot

Link: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha

Once this is installed you’ll see “css” appear in the address bar.

Step 2: Go to Twitter.com

Link: http://twitter.com

Log in, and arrive on the default timeline.

Step 3: Do the magic

  1. Alt+ M (on Windows) will open the Stylebot sidebar panel
  2. Select “Advanced” in the bottom (next to the blue “Basic” button)
  3. Up at the top, where it says “Select an element” paste this in there “div.dashboard” (without the quotes)
  4. In the “CSS for selected element(s)” window, paste this “display: none;”
  5. Now, click the arrow/box button to reset the “Select an element” box
  6. Repeat step 3, but paste this “div.content-main” instead
  7. Then this in the CSS for selected element(s)

width: 820px;
float: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

If you did that right, you should see nothing but the Twitter timeline, about 30% wider than it used to be, and no dashboard stuff.

Bonus: Add “li.topics” to the elements and give it a “display:none;” to dump the “Discover” from the navigation bar too. I have yet to ever find anything worth my attention in there & there’s always a notification glow on that button. Annoying.

 

01.30.12 • posted in: Technology

  • Anonymous

    Great tip! FWIW, the main content div for me was “div.main-content” (as of today).