The simplest guide: Make your Twitter sidebar transparent and invisible

by Dave Larson on August 5, 2010

Also popular: 

Alternate directions with browser bookmarklet

So many people are failing to follow the directions properly about typing in the “javascript:” (don’t forget the colon—”:”—character at the end!) characters by hand, that I’ve created a bookmarklet to simplify things for folks.

  1. Simply drag this box into the bookmarks/favorites bar of your browser: Clear My Sidebar!. It will look different on different browsers. Make a note of where you dragged it to on the top bar of your browser! You’ll need to click
  2. Then, login to Twitter and go here: http://twitter.com/settings/design.
  3. Clear your browser’s cache (see http://bit.ly/FixBrowser for tips).
  4. Click the icon on your browser’s bookmarks bar where you dragged the “Clear My Sidebar” box. Click the save changes button at the bottom of the Twitter page. You’re done!
If it doesn’t work with the bookmarklet for you, scroll down and copy the code by hand (you’ll also have to do some typing).

IMPORTANT!! Try the troubleshooting tips before leaving a comment that it “doesn’t work.” It still works. Explain what you tried if having problems.

A couple of notes:

  • Once you change anything else, the transparent sidebar steps will have to be done again. So you may want to create a test account to experiment with, and then once you find the settings you like, use those on your main account.
  • There is no way to make the whole page transparent. Just the right-hand sidebar.

 

Ultra simple: Paste the code shown below into your browser address bar here, press enter. The short version:

  1. Login to Twitter and go here: http://twitter.com/settings/design. Clear your browser’s cache (see http://bit.ly/FixBrowser for tips).
  2. Paste the code (copy it from below) into the address bar on your browser.
  3. Check the code to see if your browser accepted it all. Type in “javascript:” (without the quotes) by hand at the beginning of the code you pasted in. (HT @amanda36c).
  4. Press enter on your keyboard, and then click the save changes button. Clear your browser’s cache again (see http://bit.ly/FixBrowser for tips).
  5. View your Twitter home page to see the result

A transparent sidebar is a bad idea if you have a background that is a similar color to your text—it may make your sidebar text seen almost invisible. Also, if your background image is very busy, it may just look bad with the text of your sidebar sitting on top of it. And if you are using “New Twitter” you may like: How To Add new media types to “New Twitter”

But if you want to try it, it’s very easy to do! It’s also easy to change it back if you don’t like it. Just follow these simple steps:

Works for new and old Twitter!

You must be logged into Twitter.com for this to work! And it seems to work best from old Twitter—you can switch back to New Twitter afterwards. Try a different browser if you get an error. Test show Twitter hasn’t changed this—it’s still working! You will likely have to reset your browser cache to see the results (see http://bit.ly/FixBrowser for tips).

It’s possible you won’t have to follow the steps in as much detail as I’ve put them down here, but this is what seems to work for everyone:

STEP 1: Click here to access your profile design settings: http://twitter.com/settings/design and then click the button for “Change design colors.” Now clear your browser’s cache (see http://bit.ly/FixBrowser for tips) and then copy the code between the lines below (don’t copy the lines!):


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


STEP 2: Delete the URL (website address) in the address bar at the top of your browser (Where is my address bar? See also: Address bars in different browsers).

STEP 3: Paste the code in where the website address was and type “javascript:” (without the quotes) at the beginning of the line. Now press enter on your keyboard. The URL will probably return .https://twitter.com/settings/design?tab=colors

STEP 4: Find and click the “save changes” button just above the bottom of your screen. It should look like this:

STEP 5: Clear your browser’s cache again and check your profile page (see http://bit.ly/FixBrowser for tips)

You may not notice anything different, but you did it! (When you first enter the script and press enter, the example sidebar will not become transparent.) The sidebar on your Twitter page (go there to check) should now be transparent.

Click here to see your transparent sidebar

Didn’t work? Having a problem?

Tips to try first:

  1. Turn off HTTPS Only…Always use HTTPS at http://twitter.com/settings/account
  2. Check and type in anything by hand that didn’t get pasted over. For example, in Chrome, I need to type in “javascript:” (without the quotes) at the beginning of the line by hand. You may need to type  ”javascript:” (without the quotes) before pasting.
  3. Try it from a different browser.
  4. In some cases you may need to do a “hard” refresh of your web page. Do this by going to your Twitter page, and then holding down the “Ctrl” key on your keyboard (Command key on a Mac) while pressing the F5 (function) key at the same time. This should do a full refresh of your page.

It is also possible that at some future date Twitter will prevent this from working. If you have a problem, leave a comment below!

To change your sidebar back to a color

  1. Make sure you are  logged into Twitter.com
  2. Return to your design settings page: http://twitter.com/settings/design
  3. Click the words “Change design colors” near the bottom of the page and you’ll see several colored boxes.
  4. Click in the colored box under “sidebar”
  5. Choose a color by clicking and moving your mouse around in the box of colors that pops up. It should look something like this:

{ 540 comments… read them below or add one }

Follower53 November 29, 2011 at 1:20 PM

Obviously doing something wrong. I paste and add javascript at beginning of code string, but when I hit enter reverts back to twitter/settings/design string
I also tried to eliminate the http//twitter.com but also reverts back

Reply

Dave Larson November 29, 2011 at 6:30 PM

Try the button instead. Avoid using Internet Explorer. Be sure to refresh afterwards on your profile page to see if there are any changes. You won’t see any changes while you’re in the settings page.

Reply

Follower53 December 1, 2011 at 9:17 AM

I think my error lies with my not understanding “place the button in bookmarks bar.” I am using Chrome & dragging it to a new tab which of course does not allow to bookmark it as it is simply a code.

Reply

Dave Larson December 1, 2011 at 2:26 PM

The bookmarks bar in Chrome, which can be shown or hidden by pressing Shift+b on your keyboard, is just below the tabs.

Reply

Remy November 27, 2011 at 10:27 PM

works! no other website i tried did. super easy. thanks!

Reply

Dave Larson November 28, 2011 at 5:30 PM

Thanks for letting us know, Remy! Glad it worked well for you :-)

Reply

giorgia morris November 27, 2011 at 5:39 AM

um.. i done it first time and it worked but then i changed background and it changed back so i did everything again and this time it didn’t work.

Reply

kirti November 25, 2011 at 6:34 AM

it worked! yay! thanks a tonne =)

Reply

Kierra November 24, 2011 at 12:34 AM

THANK YOU!! I’ve been looking forever for this to work.

Reply

dhanvan November 23, 2011 at 1:27 PM

i just tried this and it DID work, however i tried searching for my twitter page on incognito mode (i’m using chrome) (to find out if it displays on someone else’s account) but then it said ‘PAGE DOESN’T EXIST!’ if anyone gets the same problem, i just tried clearing the cache again it now shows :)

GRACIAS!

Reply

Dave Larson November 25, 2011 at 1:23 PM

Yup, you need to clear cache (http://bit.ly/QuickTwitterFix ) to be sure you’re seeing things accurately.

Reply

dhanvan November 23, 2011 at 1:12 PM

if this is done, is this visible to anyone else? or they have to have this installed as well to view the transparent sidebars of another twitter account? curious.

Reply

Dave Larson November 23, 2011 at 1:35 PM

There is nothing to install. This simply changes the color setting to transparent for all viewers of your Twitter page.

Reply

Emilie November 20, 2011 at 8:24 AM

Thank you so much! First it didn’t work, but after clearing my browser history, it worked, I finally have a transparant sidebar again! ^_^

Reply

Al Ginia Bieber November 19, 2011 at 6:15 AM

Thanks !!!! I Love it !! Now it works

Reply

@_SHOTGUN November 18, 2011 at 10:34 PM

THIS BY FAR IS THE BEST METHOD YET; THX SO MUCH FOR THIS! :)

Reply

@aji_sanji November 18, 2011 at 12:48 AM

its work thanks so much

Reply

@ghzheksa November 17, 2011 at 3:08 AM

wooww its workkk thxxxx!!!!

Reply

Models R US November 17, 2011 at 1:11 AM

So tell me why didn’t you just put — javascript: in front of the copy and paste stuff instead of having us add it ourselves. I so fell on my face numerous times. Model behavior.

Reply

Hayyu November 16, 2011 at 8:46 AM

Thank’s a lot for this information. Finally, I can make my sidebar transparent. :)

:) :) :)

Reply

Kadre'a November 12, 2011 at 8:15 PM

The first couple of times I tried to do it with Google Chrome, and it didn’t work. But this time I tried Safari, and it worked just great on the first try!. Thanks!.

Reply

taylor November 11, 2011 at 12:51 PM

it does not work smh

Reply

Dave Larson November 11, 2011 at 3:43 PM

What did you try? It’s worked for thousands of people.

Reply

Tonae November 6, 2011 at 7:56 PM

Its not working Ive tried it like seven times someone PLEASE help me, btw FMOT @_Tonaeee <<<<—-Only One Under Score : )

Reply

Dave Larson November 11, 2011 at 3:42 PM

What have you tried?

Reply

insomnie November 2, 2011 at 10:44 AM

génial dépendance vivement pour tout. votre site internet est tout uniquement faramineux et étonnant

Reply

Pat November 1, 2011 at 12:01 AM

Thank you so much! It works for new twitter :)

Reply

Dave Larson November 1, 2011 at 6:25 AM

Thanks for letting us know it worked for you, Pat!

Reply

mcjllane October 19, 2011 at 12:18 PM

I followed all the instructions and it worked. I have my BG back and made the sidebar transparent again. Thanks Dave!

Reply

shinju October 18, 2011 at 2:14 AM

it doesnt work~~ i dunno why~~ i have followed all steps~ but i got nothing.. :( i’m using mozilla firefox.. what should i do??

Reply

Dave Larson October 18, 2011 at 3:00 PM

Are you typing or using the bookmarklet? What happens when you try?

Reply

molie October 17, 2011 at 11:41 PM

it doesn’t work on me.. i tried like a gazzillliiooon times but still ain’t working… every time i enter the code it just leads me to this one (http://www.searchqu.com/web?src=crb&appid=102&systemid=406&sr=0&q=document.getElementById(%22user_profile_sidebar_fill_color%22).value+%3D+”%3Bdocument.getElementById(%22title_theme%22).innerHTML+%3D+’Click+The+Save+Changes+Button+At+Bottom+To+Finish!!’%3Bvoid(0)%3B) so what shall i do?? ..

Reply

Dave Larson October 18, 2011 at 12:26 AM

What browser? Are you typing or using the bookmarklet?

Reply

Melanie October 17, 2011 at 1:05 PM

Thank you ,thank you ,thank you ,I tried everything and when i say everything i mean everything till i tried to use the brower Opera and it worked !!!!! I am so Happy :) )

Reply

Dave Larson October 17, 2011 at 1:44 PM

Cool!!!

Reply

olfia October 14, 2011 at 10:54 AM

that’s cool!! really worked. thank youuuuuuuuuuuuu!!!

Reply

Dave Larson October 15, 2011 at 11:13 AM

Thx for letting us know!

Reply

laura October 9, 2011 at 3:39 PM

me again, i switched from internet expoler to google chrome and this time when i put c/p the code and type in “javascript:” with out the quotes, it just searches for that code…

so it still doesnt work

Reply

haje October 10, 2011 at 8:14 AM

hey try this:
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);
hope it help :)

Reply

laura October 9, 2011 at 3:34 PM

i did not work for me. i c/p the code, typed in”javascript:” with out the quotes and it did nothing. didnt change anything, nothing popped up, it didnt take me to another page. it did nothing.

Reply

Dave Larson October 9, 2011 at 6:14 PM

It’s not supposed to change that page, you need to go to your twitter page and refresh afterwards to see the results.

Reply

Andy October 6, 2011 at 4:12 PM

It works .Thanks a lot :) )

Reply

haje October 5, 2011 at 2:10 AM

OMG this really Works guys!!!!! thank you so much
to make it work you should type javascript: first ex:
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);
that’s it hope it helped you guys :)

Reply

jasmine October 3, 2011 at 7:09 PM

omg thank you soooooo much nothing else and finally something that works

Reply

Dave Larson October 3, 2011 at 11:17 PM

Cool! Thanks for letting us know it worked for you :)

Reply

cristina October 3, 2011 at 3:53 PM

how does it work? im trying to make it transparent but i got nothing!

Reply

Dave Larson October 3, 2011 at 6:04 PM

You need to explain what you did so I can help you :)

Reply

Leave a Comment

{ 6 trackbacks }

Previous post:

Next post: