Remove any element on a website with CSS Adblock
When you browse sites on the Internet you may sometimes stumble upon irritating or irrelevant elements on them. Maybe it is that flashing ad that you do not like, the site's logo, some text that is displayed on all pages, or social media icons that you never use.
While you can use an ad-blocker to take care of all advertisement related nuisances, a social networking blocker to get rid of media icons, or No Script to take care of many script-powered elements, you sometimes may need to remove elements that do not fall into those categories.
The go-to application for many Firefox users is Remote it permanently. It is an excellent add-on for the web browser that you can use to remove elements on a website so that they will never appear on it anymore.
If you are not using Firefox, or prefer to use a userscript instead, because it is a lightweight alternative, then you may want to take CSS Adblock for a test ride.
CSS Adblock
The name should not irritate you. While it has been primarily been designed to remove advertisement from websites permanently, it can be used to remove any CSS element on any website permanently as well.
Whenever you want to remove an element, use Alt-Shift-A or Alt-Shift-B to enter edit mode. The first has been designed specifically for advertisement, while the other is for all other page elements on the website. Here you can now select the element that you want to remove. When you click on it, you are presented with a box that provides you with detailed information about the object that you want to remove.
This is usually CSS code but can also be other HTML code. For ads, it is often an IFrame while regular elements are usually listed with their CSS class.
Once you have made the selection and clicked ok, the element is removed from the page and all other pages on the same domain. If you remove an ad on one page, it is also removed on all pages, provided that it is using the same code to launch.
Other shortcuts of interest are Alt-Shift-U to unblock elements or Alt-Shift-E to edit existing styles.
Note: If you have multiple keyboard layouts installed, you may switch between them when you use the Alt-Shift shortcut, as it does exactly that. The only way around this right now is to edit the userscript code.
The script is fully compatible with Mozilla Firefox, Google Chrome and Opera. Firefox users can install it right away in their browser provided that the Greasemonkey extension (or a comparable extension) is installed on their system.
Chrome and Opera users do not have to install Greasemonkey, but they need to download the script instead and drag & drop it to the extensions page of the web browser.
Verdict
The script works surprisingly well on the majority of Internet sites. While it may take you a while to get the hang out of it, you will soon block page elements in a couple of seconds.
Now Read: How to speed up slow loading websites.
Advertisement
The Element Hiding Helper for AdBlock Plus also does this.
Hmmm thought this would be good for getting rid of Google’s blue banner
‘Hi there. Our new Terms of Service update how we display your information in content & ads.’
as i self destruct cookies when closing tabs in FF , it does not seem to remember to block it
i do not wish to have their cookies on my machine —so no good white listing
also i find my bookmarks pop up on alt -shift- B, thus hiding the Css until i click on vacant space
How did I miss this one?! LOL! I’ve been using NoScript, Bluhell, and Stylish. Thanks, Martin, I’ve been getting tired of doing display: none for the web page elements that fall through those three. Hoping it’s light on resources.
You don’t need this if you have that already.
NoScript/ScriptNo–granular JS/Plugin rules/Web Firewall and anti exploit (XSS/Clickjack)
Bluehell/Adblock/+–adblock list via elements and urls
Stylish/GMonkey/Stylebot/Adblock Element Helper–CSS editor can include custom JS and certainly CSS
If you can’t block with that…another CSS element modifier will not help although the interface may be better. I like live CSS editors like stylebot for Chrome.