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.
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:
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:
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.
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.
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?Advertisement
Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.
We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.
If you like our content, and would like to help, please consider making a contribution:
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.