Perhaps what I like best about Vivaldi is that it includes a lot of functionality without having to hunt around for plugins that might do the task. But it is also quite customizeable, including its own user interface. This post focuses on how to customize that user interface.
This post is inspired by the instructions on the forum, but they are slightly out of date as of the time of this writing.
First, go to vivaldi://experiments, search for "Allow CSS Modifications", and enable them. Click the restart button that appears; Vivaldi will helpfully relaunch with the same open tabs you had before.
Next, open the Settings, and go to the Appearance section. Scroll down to "Custom UI Modifications", and enter a folder where you will put the CSS files that contain your modifications.
This is the key part. Go to vivaldi:about, and press Ctrl+Shift+J to open the Dev Tools (the Ctrl+Shift+I shortcut does not work on the "internal Vivaldi" tabs).
Go to the Elements tab, click the selector icon, and you can now select elements of the browser UI, not just elements of an open tab. Find the element you want to modify, examine its CSS, tweak it, and figure out how to modify it as you wish.
Once you are happy with the modifications, create a CSS file in the folder that you selected earlier, write the appropriate CSS, save it, and restart Vivaldi. Your changes will be present.
I used this method to expand the "Add Bookmarks" dialog to show more of my bookmarks. It was a bit claustrophobic before, which resulted in not scrolling through my bookmarks to properly sort new bookmarks, due to the amount of scrolling required. Now it's more appropriately sized to my display, which will hopefully result in better-organized bookmarks going forward.
I've already been customizing website experiences with UBlock Origin filters and Tampermonkey scripts, but this open a few more possibilities to make for a more effective and pleasant web experience.
Return to Blog Index