Permanently modify the design of any website by taking advantage of uBlock Origin's cosmetic injection

Some months ago i wrote an article explaining how to temporarily change the layout of any Vivaldi browser component. Temporarily. And browser components. Today I am going to explain how to make permanent tweaks to web pages, and for this we will take advantage of the capacity that uBlock Origin, installed in Firefox and Chromium by default in some Linux distributions, to make "cosmetic" changes. It does it like everything else, injecting information into web pages, but all local.

To make these changes, it is need to know HTML and CSS, and also how to use the developer tools. Basically we are going to indicate what changes to make to what web pages and on what elements, and the result can be like the one in the header screenshot: get our own dark theme to LinuxAdictos. It may look better, but a lot more work would also have to be done with the selectors (more information in MDN).

Steps to follow to modify the CSS with uBlock

Before continuing, I have to say that I have done the tests with uBlock Origin, but it should also work in any extension of this type that has that "cosmetics" section. It is this one that makes changes to the CSS and the one that will allow us to include our own rules. It doesn't work, for example, in the native Vivaldi option, but it does in Brave if you know how to add them.

Explained the above, this is what I added so that the header capture can be seen:

linuxadictos.com##html:style(color:white !important; background-color:black !important)
linuxadictos.com##h1,h2,h3,h4,h5,h6:style(color:white !important;)
linuxadictos.com##a:style(color:white !important;)

Of code:

• ## is what indicates that the thing behind it is a selector. If what we want to select is an ID, there will have to be three pads, but because the third is the ID. In these cases, it's all tag selectors, and the tags have nothing before them. For more information, once again I refer you to the MDN link.
• The tags are the selections, and in these examples there is everything (html), the title tags (h1-6) and the link tags (a).
• To indicate a style, then we have to put :style.
• Rules are enclosed in parentheses, not braces as they are written in actual CSS.

And that would be all, although it can get much more complicated if you want to make more and better changes. Since the rules are in an extension that is responsible for making changes to web pages, when it reaches those rules it will apply the changes. And I already forgot, that nothing described is useful if we do not indicate where these changes go: they go in the configuration of the extension and in the "My filters" section. Kinda the same in Brave.

Is there a website whose design you don't like? Now you have the solution.