Vivaldi Essentials is a group of css files that add various features or enhancements to Vivaldi's interface. The main css was originally a part of my Vivaldi skin, AFV, but I became of the opinion that they were outside the necessary scope of the skin and decided to move them to their own project. The other css files are random bits of code I wrote either on the forums or on the Vivaldi subreddit to answer other peoples' requests for custom mods or solve other peoples' issues with the interface. I believe all of these changes should be in Vivaldi by default, available as settings to tweak.
- add a 1px window border that persists when native window is disabled
- reduce amounts of empty, unused space in various places
- hide Vivaldi's built-in titlebar when GUI is hidden
- when tabs are not at the top of the window, merge address bar with header
- Remove Vivaldi's ugly header gradient
- autohide addressbar
Note: do not use
ve_autohide_Addressbar.cssif your address bar is at the bottom. It will not work as intended.
- autohide panel
Note: Vivaldi actually has a setting to automatically hide the panel. If you ctrl+click on the panel toggle button in the status bar, it will auto-hide your active panel. However, this css is more minimalist as it also automatically reduces the size of the panel icon strip to provide even more room for content.
- make the panel appear to merge with the Vivaldi menu icon, similar to Opera's panel
- merge the address bar with the tab bar
Note: do not use
ve_autohideAddressbar.css. It will not work as intended. Also, don't use it if your tabs aren't at the top of your browser.
style in your Vivaldi install directory. It should be in the following places depending on your platform:
Now, download the css files corresponding to the features you want, and drag them into that folder.
resources/vivaldi/browser.html in a text and add the following to
<link rel="stylesheet" href="style/[css_file_name_here]" />
For example, if you only wanted to use the main features of this mod, you'd add the following to the head:
<link rel="stylesheet" href="style/ve_main.css" />
If you want to use multiple files, just repeat the above for each one. You need to add a line for every file you want to use.
Need more help? Get in touch!