Overwrite CSS Filters in uBlock Origin

uBlock Origin is a great browser extension (e.g. for Firefox) that blocks unwanted content on websites. That might include tracking scripts, ads, or social media buttons. But sometimes—especially if you use third-party filter lists—some websites might break or misbehave.

One subtle example is the blocking of newsletter subscription containers. When you sign up for a certain service, most websites want you to to get their useless newsletter. And of course, those checkboxes are almost always prechecked. Now if uBO hides the container alltogether, you don't see the selection and consequently cannot unselect it.

If that happens to you, you have to find out which list and filter hides those containers. In my case, it was filters from the "Fanboy's Annoyance List". Click on the uBO icon in the browser and select "Open the Logger". There click on the "Reload the tab content" button. Now you should see a list of elements that are loaded in the corresponding website. Look for yellow columns, escpecially those starting with .newsletter or #newsletter. By clicking on them, you can see where that filter is coming from and also see the actual filter definition (for example ##.newsletter-subscription).

Luckily, uBO allows to overwrite those rules. Click the uBO icon in the browser again and select "Open the dashboard". From there, click on the "My filters" tab where you can add your own filters or overwrites. Copy and paste all the filters that you want to overwrite (one filter per line) and then add a @ in between the first two hashes #. The @ makes sure that those filters do not block the selected elements. Then hit save and reload the problematic website to check whether it worked.

These are some examples (note that lines starting with the exclamation mark ! are ignored):

! Overwrite list configuration
! (otherwise you cannot unselect the newsletter checkboxes)

! actual working overwrites
#@#.newsletter-subscription
#@#.newsletter-wrapper

! dummy examples to show the syntax
example.com#@#.example-class
example.com#@##example-id