Customize the visible buttons in Vivaldi as you like! Change the position, icons, color, size and make the extension icons truly monochrome! You can place buttons and extensions wherever you like, add or remove spaces, and make the toolbar compact, w i d e or HUGE!
-
Download the archive with all the files:
-
Go to
C:\Program Files\Vivaldi\Application -
Open the version folder.
-
Go to
resources\vivaldi -
Copy the
window.html,public.jsfiles here and skip next step. -
Open the
window.html. After the element<body>add the following line:<script src="customise_buttons.js"/></script> -
Open the
public.js. For each button you want to customize, create/copy a code block that should look like this:
-
Read the rules on how to work with these parameters. Explore already existing code blocks to better understand what values to enter!
Parameters you are not interested in can be blank:
' '. Thebuttonsconfig must not contain extensions, and theextensionsconfig must not contain buttons!
I recommend you use these mods in conjunction with the script:
Here you can find the SVG code for the icons. Copy it and paste it in quotation marks ' ' in the svg parameter:
- https://pictogrammers.com/library/mdi/
- https://icons8.com/icon/set/SVG/
- https://freesvgicons.com
- https://www.flaticon.com
To match the color of other icons, use white. The script will take care of the rest.
-
Type
vivaldi:inspect/#appsin your browser or openopen_console.lnk. -
Find the line that contains
window.html -
Click
inspect. -
Click the
consoletab. Read the errors and fix them in the script.
If something is still not working after your fixes, open the issue or or go to the topic on the forum. Don't forget to attach a screenshot and a description of the problem!
I optimised not only the speed but also the readability of the script. I documented many optimisation tricks. Customizing 10 normal buttons, changing and moving 4 extensions, changing 4 extensions on another toolbar takes just from 7ms to 11ms:
I will be glad if you suggest improvements and innovations and find a workaround to the limitations.
-
I can't move buttons from invisible panes: e.g. if I close the status bar, I can't move any button from it.
-
After adding tabs to the tab bar, the svg icon's height attribute disappears. Fixed by assigning it manually, but it's weird.
-
I can't load SVG/PNG icons from disc: I got
fetch error. Chrome flags and settings do not fix the error. -
The SVG parser is currently replacing all types of
whitewithcurrentColor, this makes it possible to change the color of all icons through thebuttons_colorglobal parameter. If the user uses a different color, such as blue, the icon color will not change through the parameter. -
The extensions popup window may go off the screen. To fix this, I need to somehow calculate the position and size of the window relative to the current position of the buttons.
-
I did not set up Mutation observer because of the infinite loop. It generates a change, which triggers mutation observer, which generates a change,... I had the idea of assigning a hidden html class to the panel that would tell the observer ‘stop, everything is fine, buttons added’.
-
Initialisation of the script can be done via
addEventListener(‘DOMContentLoaded’, (event) => {}), but I haven't tested this feature. -
I haven't figured out how to assign hotkeys to each button. This could fix the issue of non-working extension hotkeys in Vivaldi.