Homepage / Hacks / How to Remove io9's Space Wasting Sidebar
Google Helpouts – A Help Provider’s Review How Much Water Should I Drink Every Day? Installing Google Wallet on Android Outside the United States Q: Is Spirituality the Opposite of Science? A: Definitely not How to Remove io9’s Space Wasting Sidebar I’d be Leery of Google Keep, Google’s Evernote Competitor FUD and Sensationalism from F-Secure on Android Malware Numbers The Definition of Irony in Web Design Weight Loss Status Update, Day 120 Weight Loss Status Update, Day 60 Weight Loss Status Update, Day 30 Weight Loss & Unconventional Eating Habits Weight Loss Problems Despite Following All the Conventional Wisdom How Strategic Voting Subverts Democracy Response to Vic Toews’ Email re Bill C-30 Privacy Concerns One Million Moms protests sexuality of JC Penny’s new spokesperson Ellen DeGeneres Review: Samsung Sidekick 4G From T-Mobile GoDaddy’s Stance On SOPA Shows Off Their Ignorance In More Ways Than One! Android 472% Malware Increase Scare Is Sensationalist Fix VSFTPD Slow Directory Listings & Timeouts Tablet Computing: Apple Only? Using Linux to Root the Sidekick 4G (Samsung Galaxy Series SGH -T839) Linux Tip: Permanently Disable NumPad Mouse Keys Google Music releases Linux Music Manager! Migrating Openfire Instant Messaging Service PBX In A Flash: Custom Dialplans & FreePBX Android App Review: Remote Desktop For Your Phone! PBX In A Flash: Send Email Using Gmail / Google Apps Android Security Apps Review: Lookout, SeekDroid, Cerberus, Prey & Theft Aware How To Get Amazon’s Free Android Apps From Outside The US Google Music Beta Impressions (vs Subsonic) Swype & SwiftKeyX Android Virtual Keyboards Review Why You Can’t Just Tell Your Computer What You Want It To Do Cellphone Use Is NOT Giving You Cancer Facebook Messages Offering “Unprecedented”? Um, No… Etsy: Great Community Care & Responsiveness! Etsy: Now Worse Than Facebook For Respecting User Privacy? Android: Major Malware Killed Fast & Clean Facebook’s Privacy Breaches And Plans On Exposing More Personal Info Facebook’s New “Like”: Instead Of You, Websites Get To Post Why You Like Them Is Mexico Safe To Visit? Definitely! Cost Of Living In Bucerias CRTC Backpedals On Allowing False News Broadcasting! Facebook: Now With Even Less Social Networking! Pro CRTC Amendment 2010-931 Arguments & Responses How To Install Carrier-Blocked Android Apps Without Rooting Your Phone Take Action On The CRTC’s Amendments To Allow News Broadcasters To Report Opinions Or Lies As Facts Ninjerktsu’s “Carl Sagan and his Fully Armed Spaceship of the Imagination” As A Single Image Puerto Vallarta & Area: Tips For Snowbirds Bucerias: A Snowbird’s Impressions Facebook: Why The Sudden Monetization Push? Facebook Outrage Du Jour: Your Posts Can Be Sold For Ads Handy Android App: FilesAnywhere, A Fax For Your Phone Facebook Apps Can Now Access Your Address & Mobile Number Diaspora – My Impressions Two Months In First Beach Day of 2011, in Bucerias! Handy Android App: Google Voice Callback Free Swype Touchscreen Keyboard For Android Signal Strength Drop – iPhone 4 vs Droid Facebook Privacy & Security Tips Making Google Voice Work After Moving To Canada Implanted Contact Lenses – Best $5000 I *EVER* Spent! Quantum Darwinism! Pantheism, Monotheism, Atheism, And Communication

Hacks, Internet

How to Remove io9’s Space Wasting Sidebar

I like io9‘s articles, but this Gawker website’s latest redesign has one of the most obnoxiously space wasting sidebars I’ve ever seen.  I really don’t need the left hand third of the browser window dedicated to showing links to the most popular stories!  And it’s fixed in place, too – scrolling down doesn’t get rid of it, it’s always present.  Why io9 chose to use a big chunk of the most valuable visual real estate on the page to put something so large, pointless and annoying I’ll never know.  However, I do know how to get rid of the dratted thing – read on to find out  a couple of ways how to do it.

First, here’s a couple of browser shots showing the problem, with both the original and my “fixed” version of io9’s home page:

io9 Sidebar Wasted Space
io9 Sidebar Wastes 33%
of Reading Space… 🙁
io9 Sidebar Wasted Space FixedSpace Wasting io9 Sidebar Removed,
Glorious Full Page Reading! 😀

There’s a couple ways to remedy this in Firefox and Chrome:  by using a CSS modifying extension such as Stylish, or by manually editing a custom stylesheet.  Which you use depends on your level of expertise and whether your browser already eats up too much of your computer’s RAM and CPU time.  So while the extension method is easy to use it eats up RAM and CPU cycles as well as requiring constant updates.  On the other hand the stylesheet method has an extremely low footprint, but is a bit more difficult to use and in Chrome may have undesirable side effects on other websites.

Easy:  Use the Firefox & Chrome Extension Stylish

Install the Stylish extension for Firefox or the Stylish extension for Chrome (Firefox will require a restart to enable it).  Click on the Stylish toolbar icon, select “Manage installed styles”, and add the CSS sidebar hiding rule to the “Code” text entry box:

	.sidebar-container {
		visibility:hidden !important;
		display:none !important;
	}

	.row .eight { 
		width:100% !important; 
	}

	.push-four { 
		left:auto !important;
	}

Name it whatever you like, ensure that the “Enabled” checkbox is checked and that the “Applies to” selectbox is set to “URLs on the domain” and enter “io9.com” into the text input.  Click the “Save” button, and you’re done!

Chrome - Stylish Extension

Advanced:  Create Firefox & Chrome Custom Stylesheet

Firefox

Firefox has a nifty option to let you add your own custom CSS stylesheet that is stored locally, called userContent.css (you’ll need to scroll down past the “userChrome.css” examples).  Mozilla also has some custom CSS extensions; @moz-document will let you make your custom CSS rules site-specific.

First you’ll need to find where your Firefox profile is located by typing about:support into the URL address bar.  Under the “Application Basics” section will be a “Profile Directory” entry, with a button labeled “Open Directory”:

Firefox about:support

Click the button to open the file browser and then navigate to the “chrome” directory.  Once there, use whatever method you like to create a new file “userContent.css” and open it for editing (I just right clicked and selected “Create File”, then chose “New Text File”).  Be careful that your text editor doesn’t decide to be “helpful” and save the file with a .txt extension.  For instance, in Microsoft’s Notepad you’ll need to surround the filename in the Save dialog in double quotes to avoid this.

Now all you need to do is enter the appropriate CSS:

@-moz-document domain(io9.com) {
	.sidebar-container {
		visibility:hidden !important;
		display:none !important;
	}

	.row .eight { 
		width:100% !important; 
	}

	.push-four { 
		left:auto !important;
	}
}

Save the file, restart Firefox, and enjoy 🙂

Chrome

The process is almost identical for Chrome, but with the important exception that Chrome doesn’t support the site-specific modifier for the CSS directives.  This may or may not produce odd results on other sites, depending on the sire developer’s choice of CSS class names.

To find the Chromium or Chrome profile directory, find your OS in the following table and use a file explorer to navigate to the appropriate directory:

Windows XP Google Chrome: C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Google\Chrome\User Data\Default

Chromium: C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Chromium\User Data\Default
Windows Vista, 7, 8 Google Chrome: C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default

Chromium: C:\Users\%USERNAME%\AppData\Local\Chromium\User Data\Default
OS X Google Chrome: ~/Library/Application Support/Google/Chrome/Default
Chromium: ~/Library/Application Support/Chromium/Default
Linux Google Chrome: ~/.config/google-chrome/Default
Chromium: ~/.config/chromium/Default

Open the “User Stylesheets” directory and edit “Custom.css” using your favourite editor to add:

	.sidebar-container {
		visibility:hidden !important;
		display:none !important;
	}

	.row .eight { 
		width:100% !important; 
	}

	.push-four { 
		left:auto !important;
	}

Save the file, and you’re done.

5 Comments

  1. Tyler Style 2013-08-18 05:52

    Ugh… other Gawker websites like LifeHacker are now using this terribel sidebar too. The same trick works, just substitute the domain of the site you’re looking to modify (ie, use lifehacker.com instead of io9.com)

  2. pnoplyr 2014-09-13 09:24

    Omigosh, I can’t believe this post exists. I googled on the off chance someone figured out how to get rid of the most annoying sidebar EVER. Thank you so much, now I can read Lifehacker again.

    • Tyler Style 2014-09-13 09:37

      LOL happy to oblige… it is gawdawful, ain’t it? 😉

    • Tyler Style 2014-09-13 09:38

      I use similar tricks on Cracked.com too… soooo much BS that I just do not want to see!

  3. Martin Hovmöller 2016-04-23 01:01

    One and a half years later…
    I finally got tired of the annoying sidebar and found this post.
    However, these methods seem to not work anymore. The sidebar-container elements are still there, but they don’t dissapear even when I implement both of these fixes. :/

Post a Comment

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

*