Divide By Zero

Rants, Gadgetry & Boring Ole Philosophy

How to Remove io9′s Space Wasting Sidebar

Written By: Tyler Style - Jul• 09•13

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! :D

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.

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

One Comment

  1. Tyler Style says:

    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)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

QR Code Business Card