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

vivaldi custom css interface

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

vivaldi css edit interface

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.

Read also:  Vivaldi Tip: Block all keyboard shortcuts

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

vivaldi interface customization

  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?

Summary
Article Name
Intro to Customizing Vivaldi's interface with CSS
Description
One of the strengths of the Vivaldi web browser is that anyone can customize the user interface using CSS, and this guide acts as an introduction for that.
Author
Publisher
Ghacks Technology News
Logo

Please share this article

Facebooktwittergoogle_plusredditlinkedinmail


Filed under:


Responses to Intro to Customizing Vivaldi’s interface with CSS

  1. Tony March 15, 2017 at 5:58 am #

    I wonder if Vivaldi will be the new customizable browser, to replace Firefox once the Web Extensions API limits the ability to customize the latter.

    • Xibula March 15, 2017 at 6:50 am #

      no, i dont think so
      firefox is an ideological cult, it doesn't matter the technical difficulties
      they will probably try to copy this feature into firefox as usual

      • Lucky March 15, 2017 at 2:29 pm #

        Actually, Firefox has had this feature for a long time now. You can customize the UI by either editing the userChrome.css file directly or indirectly using the Stylish add-on. However, whether or not this feature will stick in the future is another question entirely.

  2. Richard Allen March 15, 2017 at 7:56 am #

    A few days ago I installed Vivaldi, again, to take it for another test drive. During install I chose to "Install for all users" instead of just for myself. That put the vivaldi.exe in C:\Program Files (x86)\Vivaldi\Application instead of AppData\Local. I'll move to the 64 bit version if I keep it. I did it that way because I wasn't sure if command line switches would work in the shortcut the other way. As it turns out, from what you've shown, either way is possible.

    Anyway, my question is, is there anyway to rearrange the extension buttons on the address bar? Looks like the order was set by the install order. Also... Vivaldi was updated last Friday. ;)

    • Heimen Stoffels March 15, 2017 at 9:42 am #

      There's currently no way to rearrange the extension buttons but the Vivaldi devs are aware of it and have said that they are going to implement rearranging in one of the next snapshots.

      You can workaround it for now by disabling all of the extensions (or part of them) and enabling them one by one in the order of your liking.

      • Pierre March 15, 2017 at 6:19 pm #

        Rearranging the extension buttons is work in progress. This feature will be here soon :)

      • Richard Allen March 16, 2017 at 4:20 pm #

        Thanks! I had actually tried your suggestion before my previous comment. For whatever reason, after a reboot, it goes back to the undesired order. uBlock Origin insists on being to the furthest left and my bookmark extension (Popup my Bookmarks) ends up to the right of uBO. I even tried a clean uninstall and reinstall but ended up with the same button order. I'm going to keep it installed and see how development progresses. Overall, performance is very good on my hardware. Running 32 bit Vivaldi on Win 7 Pro x64.

  3. Mystique March 15, 2017 at 11:17 am #

    Is there any way to prevent tabs becoming toothpicks when you open a large array of tabs or is it a lost cause just like Chrome and every other clone.

    • VivaVivaldi March 17, 2017 at 1:43 am #

      Not yet (well, maybe if you do some GUI hacks like this article mentions, but otherwise no), but it has been asked many times. It might even be in the works, I don't know.
      However, why don't you group your tabs in stacks? I find it hard to believe you have a zillion of unrelated tabs open.
      Also, tab stacks have the nice option of being assigned names for easier identification.

  4. Earl March 15, 2017 at 12:11 pm #

    So, basically, this is a hack of the Vivaldi internals; Vivaldi doesn't actually support user customization of the UI with CSS as Firefox has with userChrome.css (as well as userContent.css). That's... unfortunate. Better than what you get with Chrome, perhaps(?), but not really a desired method if you have to do it over with every update. This is one area where the Chromium devs really "missed the boat".

    • VivaVivaldi March 17, 2017 at 1:59 am #

      It will most probably be supported officially at some point.
      You have to keep in mind the browser is basically brand new and adding features at a pretty fast pace. It's just not possible to add skinning support right now when so many other important stuff (essential Opera 12 functionality that has been promised from the beginning) are still being worked on.
      They are not sitting on their asses; they are actually working on big features like mobile Vivaldi and mail and sync as we speak. And even so, they are already way past any other browser out there in terms of features. There is only so much a small team can do in a limited amount of time.
      Firefox is 14 years old. Vivaldi is 1 year old (almost).
      Just give it more time and crazy skinning will come to Vivaldi.

      • Earl March 19, 2017 at 3:13 am #

        Yes, I'm waiting for Vivaldi for Android--for awhile now.

        Vivaldi is only new-ish, as it's been in development for quite some time--more than 2 years. Firefox had custom/user CSS almost from Day One (Phoenix), user customization being one of its design criteria (then, not now). Chromium *HAD* support for custom/user CSS... until they ripped it out; of course, that was only for sites and not for browser chrome. As far as I'm concerned, a failure to support custom/user CSS is a failure to support the CSS standards (Hey, Google... one of your cascades is missing!).

        I'm no longer much interested in themes as much as small... "adjustments". This has always been easy with Firefox, even more so with the internal changes introduced with Australis. Being able to easily tweak sites is important to me (so I'm using Stylus [in Chrome]--not Stylish any longer).

  5. Dale Poole March 15, 2017 at 1:19 pm #

    Sorry Martin, this is the poorest article you have yet written.

    File locations are entirely incorrect and the only Vivaldi related "common.css" file I could find looks like it was "optimized" and is pretty much impossible to read.

    I agree Notepad++ is very good, but it couldn't format this file into anything useful. Perhaps you could discover ways to make this file human-readable?
    .

  6. Dale Poole March 15, 2017 at 2:00 pm #

    Wanted to add to my last less-than-helpful post.

    I found the proper "common.css" file on this path

    C:\Users\\AppData\Local\Vivaldi\User Data\Default\Extensions\cjpalhdlnbpafiamejdnhcphjbkeiagm\1.11.4_0\css

    I am also currently working on Windows 7 and while MS thinks we should all be on Win 10, the reality is that they have no idea how that impacts a large organization trying to maintain security and privacy. If they did, they wouldn't be so glib about how poor a job they do supporting any environment that isn't completely Windows.

    So, Martin's previously noted file path is likely to be correct on Windows 10.

    • Jed March 15, 2017 at 5:29 pm #

      Got nothing to do with Microsoft, Vivaldi themselves set that as the default install path, which can easily be changed during install.

  7. Tom Hawack March 15, 2017 at 2:08 pm #

    Have I modified the UI of my web browser of choice? If the question doesn't implicitly consider Vivaldi is that browser then, yes. Thanks to the Stylish add-on I've heavily modified Firefox's UI, everything from the toolbars to Firefox's Start page (about:home), not to mention what is excellently performed with the 'Classic Theme Restorer' add-on.

    I've had to create occasionally a dummy new Firefox profile to check a setting, and the UI which appears hasn't a chance to prevail on the modified one, crafted years after years to be in conformity with my requirements in terms of aesthetic (colors, proportions, disposal) but also in terms of access to various settings. The list is long.

    From what I read here customizing Vivaldi's UI, feasible, remains nevertheless complicated compared to a dedicated css tool (add-on) which includes UI modifications provided the browser allows it.

    Whatever the browser, it's UI, out of the box, is always in conformity but with a vague, general consideration of the user's needs, understandable since users are not (yet) formatted to unique likes and dislikes.

  8. Mark Hazard March 15, 2017 at 2:35 pm #

    I think most people will leave Vivaldi alone. Only power users will want to manipulate CSS, and I think that it is time wasted just to change the UI. Most people want to make changes with a menu system. They don't want to learn CSS.

    • why March 15, 2017 at 5:38 pm #

      why do you think the average users need to make their own css?

  9. Kubrick March 15, 2017 at 3:00 pm #

    But why should a user have to resort to delving into CSS etc just to customise the interface.?
    why not just incorporate this into the settings.I took in all of the hype about vivaldis "customisation" and i installed the browser,however i saw nothing innovative at all,The interface couldnt be customised,everything else i can more or less achieve in my browser of choice which is palemoon which is far easier to customise.

    If for whatever reason palemoon becomes unavailable then i may consider vivaldi,but at the moment the customisation is not for the regular user.
    Nothing "new" about it.

    • Tanel March 15, 2017 at 5:43 pm #

      Because having an option for everything is sort of limiting, CSS allows full customization.

      What they could do is make the css based themes offical and provide somekind of a repository like Opera presto or Firefox used to have.

      Other than that, Vivaldi actually allows "quite alot of customization" in the wide bunch of Chromium based browsers. However it still feels abit slow compared to Chrome itself.

  10. Marcin March 15, 2017 at 3:47 pm #

    This isn't an user friendly manipulation :(

  11. Orange March 15, 2017 at 7:32 pm #

    I need a browser not a toy.

  12. Mike March 15, 2017 at 8:25 pm #

    Vivaldi's greatest asset, its customization options, could also be the downside to the browser as well. I have noticed that Vivaldi has a noticeable lag that just isn't present with Chrome or Opera, even though they share the same engine. Even on battery life, it seems significantly worse than Opera or Chrome. It is a bit of a shame, since I want to use Vivaldi, but the downsides are still so immense for me.

  13. Bobby Phoenix March 15, 2017 at 11:16 pm #

    Is there any way to get address bar domain highlighting? Every time I try this browser I can not figure out how to make the domain highlighted like every other browser in the world. Am I just missing it?

  14. anephew March 16, 2017 at 9:14 am #

    Hi!

    Using "workspace" feature of the DevTools you can save the css file directly from the tool DevTools =)

    Checkout gif, more about Workspace: https://www.google.ru/search?q=developer+tools+workspace
    https://psv4.userapi.com/c810522/u768678/docs/a15e49507b20/vivaldi-devtools-workspaces.gif

  15. Clairvaux March 16, 2017 at 7:03 pm #

    This is way too geeky for me. Nice to know it's there, but still. The level of customisation I would like is the one you get with Firefox's interface (am I even allowed to say that ?), or the one you used to get with Microsoft Office, when toolbars and menus were entirely customisable -- but through a menu, of course. Or, again, through add-ons...

Leave a Reply