On Swapping Twitter’s Columns Around

Yesterday morning I logged into Twitter. This is what I saw:

Yes, I’d been upgraded to “New New Twitter,” which began going live to users a month and a half ago.

It’s fine, and it’s functional, but one thing irked me.

I didn’t like the column layout. For as long as I’ve been using Twitter, the stream is on the left, and the sidebar is on the right, and the new design has those flipped — sidebar on the left, stream on the right. The first thing I see in the top right when I log into Twitter shouldn’t be who I am, since I know who I am. It’s the content that I want, and that should be on the left. 🙂

Fortunately, that was an easy CSS fix. I opened up Opera Dragonfly (the code debugger), figured out what the DIVs were called, and I wrote these two lines of code:

.dashboard {
     float: right !important;
}

.content-main {
     float: left !important ;
}

Now when I access Twitter, Opera pulls up a stylesheet just for Twitter, and the columns are flipped around — stream on the left, sidebar on the right — just like so…

Nicely done. 🙂

Firefox users, this is the code you would want to add to your userContent.css file to flip “New New Twitter”‘s columns around:

@-moz-document domain(twitter.com) {
    .dashboard {
         float: right !important;
    }

    .content-main {
         float: left !important ;
    }
}

The fun things one can do with local code. 🙂

2 thoughts on “On Swapping Twitter’s Columns Around

  1. Finally got around to installing this update as well, took all of about a minute, and it’s great. It just seems weird and unnatural to have the column I always read on right hand side and the column I couldn’t care about on the left.

    Thanks again.

    1. Ronny, I’m glad it worked for you. I agree totally with you that Twitter just looks wrong with the columns the way they are now. I was surprised, quite honestly, how easy it was to flip them back. I didn’t think I’d get it to work at all.

      There’s one additional bit of CSS code that I’m using, to remove the lightened background behind the columns:

      .wrapper, .wrapper-narrow, .wrapper-permalink {
           background-image: none !important;
      }

      Good stuff. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *