This is intended to be a short article that serves as an extension of this other. At that time we explained how to make temporary modifications to Vivaldi, for which it is necessary to know at least the selectors and some CSS rules. What will be explained here is how to make them permanent so that they persist after closing and reopening the browser. In theory, the changes we make will be safe, and will stick even between updates.
There is some information on this thread from Vivaldi's blog, which is already six years old. There it is explained that to make the changes permanent you have to activate an experimental option, and he is still with that label today. Once activated we can create CSS sheets with the rules, and all the changes that were temporary in their day will become permanent.
Vivaldi with your CSS rules
The principle of the trick is the same: we have to go to vivaldi://inspect/#apps and low chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html, click on "Inspect". The browser's developer tools will appear, and we'll use the arrow to find out what classes, IDs, attributes, etc., an element has. It will be this information that we use in our CSS style sheets.
Once we are clear about what we want to modify, or before, but here we have started remembering the trick, we must go to vivaldi: // experiments y check the box “Allow CSS modifications”. With the option activated, we go to the Appearance section of the settings and in USER INTERFACE MODIFICATIONS we indicate the folder where we will put the CSS sheets. What remains would be to create at least one sheet with a CSS rule and restart the browser.
¿Qué se puede hacer?
everything can be done, as long as you hit the selectors. It is common to use display:none to hide an element. I've found it useful to be able to change the color of DeepL's icon in the panel, as his favicon is dark blue and looks better on white than its original color. The panel buttons do not have an ID, but they do have a "name" attribute, and in my case I have set it white with this:
button[name="WEBPANEL_1d189260-cad3-4bc0-98f9-434d67cf7b1f"] { filter: grayscale(1) invert(1) }
Keep in mind that this "name" is the one that appears to me, and it is likely that others will see different text strings.
As we mentioned, changes are assumed to be safe, but we must remember if we have done any of this and, if something does not go well, the first thing to do to solve things is to uncheck the box to allow CSS modifications.
With this you can have your Vivaldi as you want.