Firefox – Always block and use space of a given element

firefoxstyles

I'd like to block a specific element on a website, everytime I go on it, and I wanna do it for any element on a given webpage when I want to it. Moreover, I want to space freed by the deleted element be used to display more of the website's content.

For instance, say I want to hide the sidebar on Stackoverflow (id = "sidebar") and let the content (id = "content") automatically fill the freed space on its right side (by centering itself for exemple).

I could also want to make an ad banner on a website be bloked and the space used to let the website display more content

I've been searching AdBlock, NoScript and Ghostery extensions, they block and fill up spaces liberated by all the "Facebook Like" "Google +1" etc. But I can't tell them to specifically block a one given element and let another element take its freed place to extend itself.

If this is possible, how can I achieve it ?

I accept Google Chrome answers too, even if I'm looking for firefox ones preferably
I accept "partial" solutions, such as only blocking a given element and not letting the others take the freed space (which I think might be impossible).

Best Answer

Originally I posted the extension Yarip as being able to accomplish what you want. As pointed out by JohnKiller in many cases it won't do the job because of the width/margin issues that he mentioned.

Firebug + Firediff (to export the changes) + Stylish (to make changes persistent) is definitely the way to go. I was able to identify what was needed to get rid of the sidebar and reflow text how you wanted in a very short time.

I've included a stylish style snippet to take care of the sidebar just so you can see how straightforward it is. All of the values to be changed were found with firebug.

@-moz-document domain(superuser.com), domain(stackoverflow.com) {
    #sidebar, .sidebar {
        visibility: hidden
    }
    #mainbar, .mainbar {
        width: 980px
    }
    .question-summary {
        width: 980px
    }
    .narrow .summary {
        width: 799px
    }
}

Note that this works on the main page only. You will add a few more changes to get the Q & A pages to look right.

That said, if you really don't want to delve into the CSS (Firebug makes this really easy) there is another extension that you can try: HackTheWeb. This allows you to both remove divs and expand and reflow others to compensate with just a few keystrokes, no modifying CSS required. You will still need to install the extension Stylish if you want to save your changes. Take note of the version restrictions (as noted on the HackTheWeb page) required to get your changes to persist.

Honestly though I think you will spend alot of time fiddling with it trying to get it to accomplish what you want because it just doesn't have the power to modify all properties like Firebug does. I tried - it definitely doesn't work that well on Stack Overflow without diving in and manually writing rules in Stylish.

If you do choose to use it though, here is a guide to the keystrokes.

Related Question