Code Icon

Browser Plugins: AdBlock and User CSS

Published on

Advertisements…a user’s worse enemy.

Nothing ruins your perfect experience on a website more than a filthy advertisement in your face. Now, I understand the need to pay bills, thus justifying ads, but I still hate them.

In fact, I hate them so much that I’ve gone ad free on my website Cause…why ruin the user’s experience?

So what can users do to fight websites that get money hungry and start plastering ads all over the place?

Enter AdBlock.


AdBlock is a browser plugin that…blocks ads. I use it with my Google Chrome browser, and it does its job quite well.

Whenever a page loads, AdBlock will have a number notification over it’s plugin symbol to tell you just how many ads it blocked on the page.

For example…let’s look as with and without Adblock.

First…without. homepage screenshot without AdBlock

Yikes. That’s scary.

Now…witness the magic of AdBlock. homepage screenshot with AdBlock

That’s better.

Now, AdBlock will catch 95%, I’d say, of ads on any given page. However, it can miss some particularly crafty ads. No problem, AdBlock has a built in system that, with your assistance, will help it find and block any ads that get through the cracks.

Manually blocking an ad with AdBlock on

Easy, right?

Well…some websites don’t like it when you block ads. For example, really hates it. They hate it so much that they interrupt your entire experience to tell you they hate it. The only way they allow you to continue is to either pay them, or turn off your ad blocker.

Get AdBlock for Chrome here.

User CSS

This is where User CSS comes in. Now, if you aren’t in the web development field, you probably have no idea what this plugin does. So, let me try to quickly explain.

CSS is a web language responsible for all of the styling on the entire internet. All the pretty colors and shapes? CSS. Cool fonts? CSS. Showing and hiding stuff? CSS.

This plugin lets you write custom CSS that gets injected into the page you visit.

So…how does that help?

Well. With some very basic CSS knowledge we can, for example, get rid of that pesky modal.

Let’s do it.

So here is’s page with AdBlock enabled…we get the mean modal. homepage with modal

Now, after looking through the website, I found the selectors that handle that modal, and also the scrolling on the page. The CSS looks like this.

See the Pen User CSS Code For Blocking Modal by Kyle Hawk (@Krazyhawk) on CodePen.

All we have to do is add that CSS to User CSS for the website and, bam, problem solved. homepage without modal

Get User CSS for Chrome here.

Final Thoughts

It takes a little bit more work to get around websites that are becoming more and more greedy with advertisements, but we can still fight back. AdBlock and User CSS are just two simple tools that you can use.

Or…you can either support the site, which if you like the site you may consider doing, or just avoid the site altogether.

Personally, I love the fun cat and mouse game.

Happy web surfing.