Wednesday, April 3, 2013

Aweful waste of space


Ever get annoyed with the advertising banners on your email, such as hotmail.com or mail.yahoo.com?  How about inline advertising in search results such as on startpage.com?

For those of you with that problem, I suggest installing AdBlock Plus.  It works seamlessly in both Firefox and Chrome.

But what about the extra space left behind by the advertisements that once were?  You can get rid of the annoying waste of space.  This is especially useful for netbooks.

One problem with simply blocking the advertising is the styling of the page still leaves space.

First, you need to allow custom CSS to be injected for the site:

Firefox plugin:
Chrome plugins:
Then, using Chrome's developer tools or Firefox's Firebug, you can tweak the CSS of the page until you hide the elements.

Here are some of the styles I used:

Yahoo:
.panescroll #toolbar, .panescroll #shellcontent {
    right: 0px;
}
Hotmail:
#MainContent {
    right: 0px !important;
}
.FooterContainer {
    display: none;
}
Startpage:
#sponsored {
    display: none;
}

So Yahoo Mail goes from this:



To this:




One note with Stylish, you have to namespace the site, so put the CSS inside it's namespace:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.yahoo.com") {
  .fullpage #main {
    margin-right: 0px !important;
  }
}
One pitfall of this approach is if the site updates it's style or elements on the page, it can break your custom styles.