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."
This is how to restyle a page with uBlock Origin:
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.
Brave 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 like clean and minimalistic designs.
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.
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.
In your inbox every Friday: 4 curated resources about programming, 2 of my coding posts, and 1 tip to get better at coding. Join my email list here. Make sure you're in for next Friday's email!
Top comments (0)