4

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).

1

2 Answers 2

4

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.

3
  • this is like what he is already doing with adblock and such. but the OP specifically asked a way to remove the white space, and this is not possible without altering the site layout. only a small percentage of sites will look clean.
    – JohnKiller
    Oct 12, 2014 at 10:14
  • I see your point and I think you are correct particularly with regard to things like sidebars adjacent to fixed-width content areas. It was my understanding of adblock that it reserved the space that the ad /div took up and not just removed it, but it appears that this is not the case. Because of that I see now that YARIP is probably not the solution that he wants even though he might be able to accomplish what he wants with some of the CSS modifying features. I see now that Firebug + FireDiff + Stylish are much more powerful. Oct 12, 2014 at 14:16
  • HackTheWeb + Stylish is one very nice way to go Dec 5, 2014 at 9:37
3

This is not possible with a generic approach that works everywhere.

You can only use a tool like Greasemonkey and write scripts targetting specific sites, and adjust widths accordingly.

This is because other items in the page usually have a "width" set to accomodate the presence of the item you want to remove (or a "margin" if the layout is fluid).

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .