Intro to Customizing Vivaldi’s interface with CSS

One of the strengths of the Vivaldi web browser is that anyone can customize the user interface using CSS. Customizing in this context means more than what the browser preferences provides you with. Basically, what it allows you to do is make fundamental changes to the web browser's UI.

This intro to customizing Vivaldi's interface with CSS guide walks you through the first steps. It explains how to prepare the web browser for that, where you find the CSS files to edit, and how to find out what you need to edit.

So lets get started right away.

Customizing Vivaldi's interface with CSS

First thing that you need to know is where to find the CSS file that Vivaldi uses to style the browser interface.

On Windows, the components are located under C:\Users\[Username]\AppData\Local\Vivaldi\Application\[Version]\resources\vivaldi\

Username and Version are values that are not fixed, so adjust them accordingly.

Note: I suggest you copy the folder with all its files and subfolders to a backup location. This gives you options to restore it should things go wrong.

The main file that you will be using as reference is stored at style/common.css. You can open the file in any plain text editor to check it out. I recommend that you use an editor with code syntax highlighting like Notepad++.

While you can edit that file directly, it is not recommended. The main reason for that is that Vivaldi updates will ship with an unmodified version of common.css. You'd have to apply all changes again to the file each time Vivaldi updates.

A better option is to use a second CSS file for customizations, and have it imported instead. Note that you need to repeat the steps after each update, but it is easier than having to edit the main stylesheet file each time:

1. Add the line @import "my.css"; to the top of the common.css file. This is an instruction to load the file my.css.
2. Open the file browser.html which you find at \resources\vivaldi\. Add the line <link rel="stylesheet" href="style/my.css"> after the first stylesheet link to it.

Preparing Vivaldi

While you can start editing values right away using the new CSS file, you may need help. That's where the browser's Developer Tools come into play.  The Vivaldi Developer Tools block you from inspecting the CSS of the browser chrome by default, but you can enable it.

On Windows, all you do is the following:

1. Right-click on the Vivaldi icon in the Taskbar, do another right-click on Vivaldi in the context menu, and select the properties option.
2. Add the following flags to the end of the target field. Make sure there is a space between the path and the flags: --debug-packed-apps --silent-debugger-extension-api. This looks the following on my system: C:\Users\Martin\AppData\Local\Vivaldi\Application\vivaldi.exe --debug-packed-apps --silent-debugger-extension-api

You can start inspecting elements in the browser now that this is out of your way.  You may right-click on browser interface elements, e.g. the Vivaldi icon, the search, address bar, or the trash icon, and select inspect to open the style information in the Developer Tools.

You use these information then to alter the browser UI, for instance by changing colors, moving elements around, or removing them entirely from the browser.

Good news is that you can use the Developer Tools to test your work before you copy it to your custom CSS file.

A simply example

1. Right-click on the trash icon in the Vivaldi interface, and select Inspect.
2. Vivaldi may not take you to the right position right away, but you can navigate the code to find it (the Developer Tools highlight the area that you select in the UI).
3. You will eventually notice that class="button-tabbar toggle-trash" is what you are looking for.
4. Make sure the line is selected, and click on the plus icon under Styles to add a new style.
5. Vivaldi fills out the right information, so that all you have to do is add the style information.
6. To hide it, add display: none !important;

The change is not permanent, and the trash will show up again if you restart the browser. To make it permanent, add the Style information to your custom CSS file.

Closing Words

You do need to know a bit of CSS to customize the Vivaldi interface. Simple operations, like changing colors, removing elements, or hiding them, are easy enough to carry out though.

Now You: Have you modified the UI of your web browser of choice??