Forem

Cover image for TIL: How to declutter sites with uBlock Origin filters
Cesar Aguirre
Cesar Aguirre

Posted on • Edited on • Originally published at canro91.github.io

TIL: How to declutter sites with uBlock Origin filters

I originally posted this post on my blog a long time ago in a galaxy far, far away.

I didn't know I could restyle elements on a page with uBlock Origin, a "free, open-source ad content blocker."

The other day, while reading HackerNews, I found this submission pointing to some uBlock Origin filters to clean up websites.

This is how to restyle a page with uBlock Origin and the filters I'm using to declutter HackerNews.

1. uBlock Origin filters to restyle elements

A uBlock Origin filter to restyle an element looks like this,

<domain>##<selector>:style(<new-css-here>)
Enter fullscreen mode Exit fullscreen mode

For example, these are the filters I use to restyle HackerNews,

news.ycombinator.com###hnmain:style(background-color: #fdf6e3; width: 960px !important; margin: 0 auto !important;)
news.ycombinator.com##.rank:style(font-size: 14pt !important;)
news.ycombinator.com##.titleline:style(font-size: 16pt !important;)
news.ycombinator.com##.sitebit.comhead:style(font-size: 12pt !important;)
news.ycombinator.com##.subtext:style(font-size: 12pt !important;)
news.ycombinator.com##.spacer:style(height: 12px !important;)
news.ycombinator.com##.toptext:style(font-size: 12pt !important;)
news.ycombinator.com##.comment:style(font-size: 14pt !important;)
news.ycombinator.com##span.comhead:style(font-size: 12pt !important;)
news.ycombinator.com##.morelink:style(font-size: 14pt !important;)
Enter fullscreen mode Exit fullscreen mode

2. How to install custom uBlock Origin filters in Brave

I use multiple browsers. Brave is one of them. It has good privacy defaults, like an ad blocker that uses the same filters as uBlock Origin.

To install these filters in Brave, let's navigate to brave://settings/shields/filters, paste the filters, and hit "Save."

If you're using uBlock Origin on another browser, click on the uBlock Origin extension icon, go to "Open the dashboard," and then to "My filters."

This is how HackerNews looked without my filters,

HackerNew front page

HackerNews front page without any restyling

And this is how it looks after restyling it,

HackerNew front page after restyling

HackerNews front page with some uBlock Origin filters

I reduced the page width and the increased font size for more readability. I don't know about you, but I prefer the second one. I don't want to get eye strain getting closer to a screen to see a small font.

Voilà! That's how to use uBlock Origin filters to declutter websites. I like clean and minimalistic designs. Before learning about uBlock Origin filters, I started to dabble in browser extension development to restyle sites. With these filters, it's waaay easier.

What site would you like to declutter with this trick? What about decluttering dev.to? Share your filters in the comments.


Hey, there! I'm Cesar, a software engineer and lifelong learner. Visit my Gumroad page to download my ebooks and check my courses.

Happy coding!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay