On some Internet sites the advertisement weight is really heavy. You even have problems to find the content between the many colorful and image-rich ads, often even turning on sound when you hover them by chance.
So what to do about this? There are browser-add-ons, with names like AdBlock or AdBlockPlus, and they may be quite useful, but we consumers do not know what they actually do. I installed one of them, but the ads were still there. Maybe they just block the ads of Y-a-h-o-o, not those of G-o-o-g-l-e ?
So I decided to try this on my own. Just for those pages I use nearly every day, like dictionaries etc. With a little knowledge of CSS it should be possible to set any advertisement invisible. I've to take care to not remove something unintentionally, because these rules will be applied to ANY page!
But how can I merge my own CSS into a web page I navigate to with my browser? And where do I have to write that CSS?
Finding the Browser's User Style Sheet
The w3c CSS specification states that there is a user style sheet that takes a certain precedence in CSS "Cascading". So browser vendors should have implemented that opportunity, and I intend to use it for removing ads.
But it seems that browser vendors do not like to support that. There is a quite outdated web page that describes how to achieve user style sheets for different browsers:
Here is my update (hope it will hold some time):
- for Chrome, use the "Stylish" add-on
- For Opera, use the "Custom Style Script" add-on.
For Firefox, you can provide a file named userContent.css at the profile-location in filesystem. Open a new browser tab and enter
about:profiles
in its address line. Following screenshot shows the resulting page.
The "Root Directory" is the profile location.
Open a native file manager, navigate to the given directory, create a sub-directory chrome, and in it a file called userContent.css. With some text editor like gedit
gedit $HOME/.mozilla/firefox/wk8nmy3w.default/chrome/userContent.css
add a simple test-rule to see if this file really works:
body { background-color: yellow; }
Reloading a simple page (that declares no color on its own) showed no effect. But when I terminated the browser and launched it again, the page was yellow. Now I could start to write CSS ad-blockers.
Just restart Firefox after each modification of userContent.css, and any ad you rule out should be gone.
Ruling Out Ads by CSS
You can get informed about CSS rules on the Internet, or you could read my Blog articles about that. Especially you may need to know the attribute selectors.
Here are some of my ad-removal rules that relieved really a lot.
*[id ^= 'google_ads'], #download-offer, div.adsense-aside, div[id ^= 'ulp-'], div[id ^= 'adzerk'], div[id ^= 'ad_ifrcontainer'], div[id ^= 'div-gpt-ad-'], a[href *= 'www.advertising.'], a[href *= 'pubads.g.doubleclick.net'], div#adv-banner, div#topMenu + div#topBranding, div#main > div#mainLeaderboard, .clc-jobs-multi, .hero-box.docs-announcement, .article-adsponsor { display: none !important; }
All these rules concatenated by comma would set the element they describe to invisible. Mind that the last rule must not have a trailing comma.
How did I find these rules? Here is a step-by-step guide:
- when no debugger is installed in the browser of your choice, find out how to install and do it now
- open the debugger by F12, or by right-mouse-click popup-menu on the browser window, choosing the "Inspect" item
- in top left corner of the debugger window you have the element-picker, click on it to get into picking-state
- move the mouse over the advertisement and click on it, the debugger will select the according HTML element in its tree view
- most likely you will need to search upwards in the element tree to the topmost element of the advertisement
- hovering it will select its shape on the browser window, so you can check whether you are on the right level
- when you found the element you want to remove, study its attributes, primarily
idandclass - when one of them expresses advertisement, write a rule about it into the user style sheet
- hide any element by the directive
display: none !important;inside the rule
Following screenshot shows the Firefox context menu (right mouse click):
So essentially you will spend some time to write rules about your favourite Internet pages, and then be relieved of the advertisements awaiting you there every day.
Example
Here is an example to illustrate the guide above.
I right-clicked the ad, chose popup menu item "Inspect", then the debugger showed me the details of the element.
How can I make this ad disappear? I would suggest following rule:
a[href *= 'pubads.g.doubleclick.net'] { display: none !important; }
This would set any hyperlink (<a>, anchor)
invisible that references an URL containing 'pubads.g.doubleclick.net'.
You can see this reference in the href attribute of the <a> element.
As the <img> element is contained in the link, also the image would disappear.
Maybe the container would stay, but it would be empty.
When you found a good rule, maybe all other ads on the page also will have disappeared!
Hopefully I did not displease anybody by showing our browser user opportunities, and hopefully anyone will be able to see the web in his/her own way, at any time in future!
So, here's my current userContent.css:
.advertisement,
.SuperBannerGrosz,
#top-ads,
#middle-ads,
#bottom-ads,
#download-offer,
#nuggadLayer,
#cookieChoiceInfo,
#cookieprompt,
#privacypolicy,
div.IL_BASE,
div.adsense-aside,
div.adContainer,
div.top-ad-container,
*[id ^= 'google_ad'],
div[id ^= 'ulp-'],
div[id ^= 'adslot_'],
div[id ^= 'adzerk'],
div[id ^= 'ad_ifrcontainer'],
div[id ^= 'div-gpt-ad-'],
div[id ^= 'inArticlePlayer_'],
div[id ^= 'inArticleVideo_'],
div[id ^= 'adzone'],
a[href *= 'pubads.g.doubleclick.net'],
a[href *= 'www.advertising.'],
a[href *= 'facebook.com'],
a[href *= 'twitter.com'],
a[href *= 'plus.google.com'],
a[href *= 'linkedin.com'],
a[href *= 'reddit.com'],
a[href *= 'stumbleupon.com'],
a[href *= 'ycombinator.com'],
a[href *= '/ad1.adfarm1.adition.com/'],
a[href *= 'trends.revcontent.com/'],
a[href *= '/www.dpbolvw.net/'],
a#facebook_link,
#social-icons-desktop,
#ad_under_article,
div#snppopup-welcome,
div.cc_banner.cc_container.cc_container--open,
div#adv-banner,
div.video-ads,
div.f_sponsorbox > div,
div#AdSense,
div.adDisplay,
div.WerberahmenOben,
div#socialshareprivacy,
div#l-social-float,
div.specific-social,
div#topMenu + div#topBranding,
div#main > div#mainLeaderboard,
div.insert_post_ads,
div.lrshare_interfacebox,
div.lr_logininterface_container,
div#BannerWrap > div#StickyBanner,
div.pyv-afc-ads-container,
img[src ^= '/_storage/asset/'],
script[src *= 'intermarkets-d.openx.net'] ~ iframe[id ^= 'ox_'],
script[src *= 'adform.net'] ~ div[id ^= 'vidazoo_'],
.clc-jobs-multi,
.hero-box.docs-announcement,
.article-adsponsor,
.social-media-icons,
.a2a_kit,
.j-tos-update-banner.tos-update-banner,
.section.m-bottom-large,
.fixedAdv1,
.OUTBRAIN,
.ad_con,
.ad_con_desktop,
.ad_marker,
.eigenwerbung-wrapper,
iframe.rp-creative-iframe-wrapper,
iframe[id ^= 'iframe_creativeIframe'],
iframe[id ^= 'ad_creative_iframe_'],
iframe[src *= '.adfarm'],
iframe[src *= '/googleads.g.doubleclick.net/'],
iframe[src *= '/ad.doubleclick.net/'],
iframe[src *= '/pubads.g.doubleclick.net'],
iframe[src *= '/ads.w55c.net/'],
iframe[src *= '/eu.bidswitch.net/'],
iframe[src *= '/AdServer/'],
iframe[src *= '/MetaAdServer/'],
iframe[src *= '/mam.ad-balancer.'],
iframe[src *= '/servedby.flashtalking.com/'],
iframe[src *= '/streaming.grm-pro.com/'],
iframe[src *= '/streaming.ad-balancer.'],
iframe[src *= '/cdn.adspirit.de/'],
html[class *= 'adform-']
{
display: none !important;
}
Keine Kommentare:
Kommentar veröffentlichen