How to Make the Right Panel on Your Twitter Page 100% Transparent

Tweet

Update: Twitter launched a completely new design on 11/10/2011 so don’t bother reading the rest of this post. We no longer have a transparent right side panel.

Edit: Please note that this hack now appears to only work with Internet Explorer 8 or older but not IE9, Chrome or Firefox.

When viewed on any browser other than early versions of Internet Explorer, the right side panel on the new Twitter pages has a transparency of 70% allowing the background to show through slightly. This can be used to your advantage with a creative background design. For example, it’s a great place to put a large copy of your logo or a  photo. Here’s a post I wrote showing some examples of what can be done.

But, wouldn’t it be cool if the right side panel was completely transparent? Yeah, it would, but unfortunately Twitter doesn’t allow us to change the transparency in the settings… unless you know the trick.

To keep the right panel from looking too much like it’s just hanging in space I added a transparent white overlay on my actual background image to create an edge on the top that extends to the far right, but the Twitter panel itself is 100% transparent. Click here to see my actual Twitter page.

This little hack has been around for a while and I’m not sure who deserves the credit for coming up with it in the first place, but it will take you about 30 seconds to do it and if you don’t like the results you can simply change it back. Keep in mind that this isn’t going to look good on just any background, you’ll need to make sure the image isn’t too busy and has enough contrast so that the text and links are still readable.

The Incredible Twitter Transparency Trick:

1. Click on “Settings” and then “Design” to get to this page. http://twitter.com/settings/design. Make sure you’re logged in.

2. Copy this bit of javascript code:

javascript:document.getElementById("user_profile_sidebar_fill_color").value = '';document.getElementById("title_theme").innerHTML = 'Click The Save Changes Button At Bottom To Finish!!';void(0);

3. Paste the code directly into your address bar, replacing the URL for the design page.

4. Hit the “Enter” key.

5. Click “save changes” and you should now have a completely transparent right side panel.

Edit: Thanks to Al Schmidt for pointing this out in the comments, but this will not work in IE9 for some reason. When you hit the “enter” button it just sends you back to the previous page.

Tweet