Vivaldi It is the best browser with which the most demanding users can work. It allows us to do everything, and in its v5.6 we can even use custom icons. As if this were not enough, there is a trick with which we can touch up practically any element, although for this it is necessary to have some knowledge of HTML, CSS and be familiar with the Chrome/Chromium developer tools. The changes are a bit like the ones we can make to any web page, with a small difference.
In any browser, if we open the developer tools and select an element, we can apply css rules. For example, we can change the font type, add round borders to text fields, or change the background color, but the changes disappear when the page is refreshed. The modifications that we will make to Vivaldi will also disappear, but when we restart the browser or open a new window. The good thing, temporary changes are maintained during that time.
How to Modify Vivaldi Elements with CSS
The trick is quite simple. we have to go to vivaldi://inspect/#apps and low chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html, click on "Inspect". A popup window will appear (I would say) exactly the same as the browser developer tools, but these will allow us to modify any element of the browser. Not surprisingly, the previous link ends with "browser.html".
And the changes are made by pulling our knowledge of HTML and CSS. First, we click on the arrow at the top left of the developer tools, which is used to select elements. When we select what we want to modify, below, in element.style, we add our CSS rules. And what can this be useful for? Well, a picture is worth a thousand words: in the previous screenshot, what I've done is change the color of the DeepL icon, which is dark blue by default; not seen on gray background. I've applied two filters to it: one to make it grayscale (it will leave it black and white) and one to invert it so it appears white.
All the mischief that can be done are endless. In the screenshot above, I've located the highest level that the top panel is on and set it to be 300px tall. Logically, it is a change that I have reverted instantly, but it is an example of what can be done.
temporary changes
As we have explained, the small difference with the changes that we can make in the web pages is that, since there is no refresh, they will be kept until the window is closed or we open a new one. Another difference is that these developer tools don't have to be open for changes to stick; we can close them When we make similar changes to a web page, they disappear when we close the developer tools.
Vivaldi offers us many possibilities, and this is another good example of it.