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:
- Add the line @import "my.css"; to the top of the common.css file. This is an instruction to load the file my.css.
- 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:
- Right-click on the Vivaldi icon in the Taskbar, do another right-click on Vivaldi in the context menu, and select the properties option.
- 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
- Right-click on the trash icon in the Vivaldi interface, and select Inspect.
- 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).
- You will eventually notice that class="button-tabbar toggle-trash" is what you are looking for.
- Make sure the line is selected, and click on the plus icon under Styles to add a new style.
- Vivaldi fills out the right information, so that all you have to do is add the style information.
- 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?


Doesn’t Windows 8 know that www. or http:// are passe ?
Well it is a bit difficulty to distinguish between name.com domains and files for instance.
I know a service made by google that is similar to Google bookmarks.
http://www.google.com/saved
@Ashwin–Thankful you delighted my comment; who knows how many “gamers” would have disagreed!
@Martin
The comments section under this very article (3 comments) is identical to the comments section found under the following article:
https://www.ghacks.net/2023/08/15/netflix-is-testing-game-streaming-on-tvs-and-computers/
Not sure what the issue is, but have seen this issue under some other articles recently but did not report it back then.
Omg a badge!!!
Some tangible reward lmao.
It sucks that redditors are going to love the fuck out of it too.
With the cloud, there is no such thing as unlimited storage or privacy. Stop relying on these tech scums. Purchase your own hardware and develop your own solutions.
This is a certified reddit cringe moment. Hilarious how the article’s author tries to dress it up like it’s anything more than a png for doing the reddit corporation’s moderation work for free (or for bribes from companies and political groups)
Almost al unlmited services have a real limit.
And this comment is written on the dropbox article from August 25, 2023.
First comment > @ilev said on August 4, 2012 at 7:53 pm
For the God’s sake, fix the comments soon please! :[
Yes. Please. Fix the comments.
With Google Chrome, it’s only been 1,500 for some time now.
Anyone who wants to force me in such a way into buying something that I can get elsewhere for free will certainly never see a single dime from my side. I don’t even know how stupid their marketing department is to impose these limits on users instead of offering a valuable product to the paying faction. But they don’t. Even if you pay, you get something that is also available for free elsewhere.
The algorithm has also become less and less savvy in terms of e.g. English/German translations. It used to be that the bot could sort of sense what you were trying to say and put it into different colloquialisms, which was even fun because it was like, “I know what you’re trying to say here, how about…” Now it’s in parts too stupid to translate the simplest sentences correctly, and the suggestions it makes are at times as moronic as those made by Google Translations.
If this is a deep-learning AI that learns from users’ translations and the phrases they choose most often – which, by the way, is a valuable, moneys worthwhile contribution of every free user to this project: They invest their time and texts, thereby providing the necessary data for the AI to do the thing as nicely as they brag about it in the first place – alas, the more unprofessional users discovered the translator, the worse the language of this deep-learning bot has become, the greater the aggregate of linguistically illiterate users has become, and the worse the language of this deep-learning bot has become, as it now learns the drivel of every Tom, Dick and Harry out there, which is why I now get their Mickey Mouse language as suggestions: the inane language of people who can barely spell the alphabet, it seems.
And as a thank you for our time and effort in helping them and their AI learn, they’ve lowered the limit from what was once 5,000 to now 1,500…? A big “fuck off” from here for that! Not a brass farthing from me for this attitude and behaviour, not in a hundred years.
When will you put an end to the mess in the comments?
Ghacks comments have been broken for too long. What article did you see this comment on? Reply below. If we get to 20 different articles we should all stop using the site in protest.
I posted this on [https://www.ghacks.net/2023/09/28/reddit-enforces-user-activity-tracking-on-site-to-push-advertising-revenue/] so please reply if you see it on a different article.
Comment redirected me to [https://www.ghacks.net/2012/08/04/add-search-the-internet-to-the-windows-start-menu/] which seems to be the ‘real’ article it is attached to
Comment redirected me to [https://www.ghacks.net/2012/08/04/add-search-the-internet-to-the-windows-start-menu/] which seems to be the ‘real’ article it is attached to
Article Title: Reddit enforces user activity tracking on site to push advertising revenue
Article URL: https://www.ghacks.net/2023/09/28/reddit-enforces-user-activity-tracking-on-site-to-push-advertising-revenue/
No surprises here. This is just the beginning really. I cannot see a valid reason as to why anyone would continue to use the platform anymore when there are enough alternatives fill that void.
I’m not sure if there is a point in commenting given that comments seem to appear under random posts now, but I’ll try… this comment is for https://www.ghacks.net/2023/09/28/reddit-enforces-user-activity-tracking-on-site-to-push-advertising-revenue/
My temporary “solution”, if you can call it that, is to use a VPN (Mullvad in my case) to sign up for and access Reddit via a European connection. I’m doing that with pretty much everything now, at least until the rest of the world catches up with GDPR. I don’t think GDPR is a magical privacy solution but it’s at least a first step.