Searching a document for UI customizations
-
Hi,
is there any document that explains what to do (files, contents etc) if I want to change the UI items?
E.g I wanted to change the icon for folders in the bookmarks list, so I replaced the folder.png in the resource dir with a modified one. But no change.
Dieter -
They use SVGs. You can use a CSS modification to change them.
Have a look at https://forum.vivaldi.net/topic/20227/changing-icons-with-css-part-ii
-
Adding mods: https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1
In order to find the correct elements and classes to change, you'll have to inspect the Vivaldi UI. You can do this by going to
vivaldi://flags
and enabling vivaldi://flags/#debug-packed-apps and vivaldi://flags/#silent-debugger-extension-api. Restart your browser, and now you can right-click an element of the UI and choose "inspect".If you have no experience with CSS and JavaScript this can be tricky to do. The folder icons are created using SVGs written straight into the HTML code. You can override these using the following CSS:
svg.folder-icon path { d: path("folder SVG path code...") !important; } svg.folder-icon.sd path { d: path("speeddial folder SVG path code...") !important; }
You can also do other stuff like load SVGs from files/urls, replacing the SVG with images, etc. But that requires some more CSS and possibly JavaScript.
-
Thanks all!
-