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>)
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;)
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,
And this is how it looks after restyling it,
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!
Top comments (0)