On Wednesday 14th of April at 9 am UTC, we will update Vivaldi's servers (see the time in your timezone). We expect it will take up to 6 hours. During this time there will be some downtime on the Forum, Sync and Community Blogs and Webmail. For status of the services, check https://vivaldistatus.com. Thanks in advance for your patience.

Guide | Modding Vivaldi


  • Moderator

    Modding Vivaldi

    We know you love customization. And you love it beyond using extensions and applying themes. Many of you started modifying Vivaldi's files, either in order to work around bugs, or to enhance Vivaldi with new features. For a fact, we all do get impatient every now and then and hence we do get your reasoning. Changing the code however, may lead to various issues, up to the point where Vivaldi crashes or doesn't start at all anymore, and may even compromise your security and privacy, if you don't know what you're doing. This topic provides some guidance and guidelines to you, so you always stay on the safe side and keep having fun tinkering.


    How do I...?

    Before you read on, be aware that you need knowledge of CSS and/or JavaScript, depending on what you intend to do. If you have no experience whatsoever, this is not for you. If you do, keep on going. First, so as to "standardize" modding a bit, here's how our Sopranos, who are testing our browser night and day and make sure that you don't experience any serious issues in snapshots, do the modding. Basically, there are two types of modifications:

    • Style that can be achieved with pure CSS
    • Functionality that works via JavaScript

    In any case there is only one single file in Vivaldi that you should ever need to modify. This file is located at YOURVIVALDIDIRECTORY\Application\VERSION\resources\vivaldi and called browser.html. You should back it up before you fiddle with it. You did the backup, right? OK, here's the fun part:


    Adding Style

    Vivaldi 2.6 and above

    • Open vivaldi://experiments
    • Enable "Allow for using CSS modifications"
    • Open Appearance section in settings
    • Choose the folder you want to use
    • Place your CSS files inside it
    • Restart Vivaldi to see them in effect

    Vivaldi 2.5 and earlier

    • Open browser.html, inside the head element add the following line:
    <link rel="stylesheet" href="style/custom.css" />
    

    You can name the file as you like of course and also add multiple ones, one line at a time.

    • Add the custom.css file to the style folder (inside the Vivaldi folder).

    That's it. You're good to go. Now you can start adding your custom CSS code right into your newly created file to alter Vivaldi's visuals.


    Adding Functionality

    • Open browser.html, inside the body element add the following line:
    <script src="custom.js"></script>
    

    Again you can name the file as you want and also add multiple ones, one line at a time.

    • Add the custom.js file to the Vivaldi folder (alongside browser.html)

    -- and you're all set!


    I think something may be broken

    If you do experience issues of any kind, please do always replace your browser.html file with your backup copy first, restart Vivaldi and check if your issues do persist. We'd really like to avoid bug reports that result from modified files, as we can't reproduce them. This takes valuable time that could otherwise be spent on fixing bugs for you. So please keep this in mind.


    My mods are gone after each update

    Starting with Vivaldi 2.6 purely visual modifications (CSS files) will keep getting loaded automatically after any updates. 💪🏻
    In earlier versions all your mods and functional changes (JS files) in 2.6 as well will get wiped after each update, hence you will need to copy these files into the appropriate folders each time. Be aware that your files may not be present after the update at all, so better store them some place safe outside the Vivaldi folder. We do have various little tools that can do the job for you, though. If you're on Windows have a look at this batch script and Linux users can head over to this post. 😉


    Have fun making Vivaldi truly yours!

    --
    ModEdit: Title



  • A "scripts" entry in settings would be a wonderful and persistent way for the injections ^^


  • Moderator

    That's one option, yes. 🙂



  • That would be preferred, I already use a couple of .user.js created by den_po and they are treated exactly as extensions, inherited at every Vivaldi update.



  • @iAN CooG:

    That would be preferred, I already use a couple of .user.js created by den_po and they are treated exactly as extensions

    So…
    .css and .js for the UI can be add directly as extensions?! 😮
    (No need of stylish/tampermonkey/violentmonkey or custom.css?)



  • Not css, but just drag a .user.js in the extension window (Ctrl-shift-E) and it installs as a normal extension
    I never used them before, but they were already supported by Opera 12
    Here is the repo of some of the script I'm using (well, now only 1 of these, center images has been fixed in current snapshot)
    https://gist.github.com/justdanpo



  • Add a shortcut to Vivaldi parameter:
    –remote-debugging-port=2015

    Run Vivaldi and open:
    http://localhost:2015/
    In the list locate the page with the end browser.html and work from the web inspector with UI Vivaldi.



  • @bubek:

    Add a shortcut to Vivaldi parameter:
    –remote-debugging-port=2015

    Run Vivaldi and open:
    http://localhost:2015/
    In the list locate the page with the end browser.html and work from the web inspector with UI Vivaldi.

    Is this working? I'd love to get this going.




  • Moderator

    @aesouza indeed. That got messed up during our transition to the new forums. I fixed that for you. 🙂



  • @rdmptn

    I agree that having this option in browser would be great, but you can already achieve per-page customisation by way of extensions

    Stylus
    Tampermonkey



  • By modifying custom.css; can I make the tab font size larger; as well as the spacing between the font size for the tab, especially if tabs are viewed vertically ?



  • Hey - Regarding the placement of the custom css file, is it possible to place it somewhere outside the versioned install directory? I assume this directory gets overwritten on update so I have to make sure to backup the custom file.

    I tried doing this:

    <link rel="stylesheet" href="../../../CustomStyle/custom.css" />
    

    It should theoretically read from the Vivaldi\Application\ directory but doesn't appear to do what I want it to.

    Also I might want to place it on another drive completely so I would need a full path - Could it be placed using a syntax like below?

    file:///C:/Users/Stian/Documents/Settings/Vivaldi/custom.css


  • @Pathduck Maybe it is possible? I don't know. But it's beside the point, because you still would have to write that line into browser.html for each update, at which point you can as well just copy the custom.css file over too, because it's practically no extra work if you already have to go into that directory anyway.



  • @Pathduck

    I can confirm that you can store your custom.css file within the vivaldi installation folder structure without it being overwritten upon update. The only folder that gets overwritten is the folder that is called according to the version # of the Vivaldi installation and of course everything inside of it. Therefore, you can place your ModFolder in C:\Program Files\Vivaldi\ModFolder folder path or even C:\Program Files\Vivaldi\Application\ModFolder



  • @sethjbr Thanks for that information - would you care to elaborate, for instance on how you refer the file in the browser.html, if you use some special syntax to make the path work.

    Months ago when I last looked at this I tried several different ways of typing the path, using ".." or "\" for Windows paths.



  • @dleon Sure - I hope they will allow this soon, so custom styles are preserved on updates.

    I was just wondering on sethjbr's claim, since they said it was indeed possible, what the syntax used to make it work is, since I have tried everything I can think of, relative paths, full paths, escaping Windows' backslashes and so on.



  • @Pathduck

    I will tell you the way I do it, and you can decide how you want to proceed. Just know that I started with the basic instructions that @Christoph142 posted at the top of this article.

    My browser.html looks like this:

    	<!DOCTYPE html>
    	<html>
    	  <head>
    		<meta charset="UTF-8" />
    		<title>Vivaldi</title>
    		<link rel="stylesheet" href="style/common.css" />
    		<link rel="stylesheet" href="style/custom.css" />
    	  </head>
    	  <body>
    		<div id="app" />
    		<script src="localeSettings-bundle.js"></script>
    		<script src="background-common-bundle.js"></script>
    		<script src="vendor-bundle.js"></script>
    		<script src="settings-bundle.js"></script>
    		<script src="urlbar-bundle.js"></script>
    		<script src="components-bundle.js"></script>
    		<script src="bundle.js"></script>
    		<script src="custom.js"></script>
    	  </body>
    	</html>
    

    Just as @Christoph142 noted in his first post, the line for custom.js and the line for custom.css are shown in the exact same directory as the bundle.js and common.css

    That makes modding really easy.

    Now, all I need to do is add these two custom files along with this slightly modified browser.html after every update. There are several ways to do this. @Christoph142 has posted one method using Windows batch scripting, and @iAN-CooG posted a python script method here, I posted a method to do this using an AutoHotKey script that could be easily compiled into an executable here.

    It is totally up to you. We hope an official method will exist to do this sooner rather than later, but this is what we got so far... 😄



  • Hi! I'am trying to add some mod

    button.vivaldi {
        display: none !important;
    }
    
    #header {
        min-height: 0 !important;
        z-index: auto !important;
    }
    
    .button-toolbar.home { display: none }
    
    

    I placed hide_ui.css into \1.13.971.8\resources\vivaldi\style and I also added a link into the <head>

      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/hide_ui.css" />
      </head>
    

    but it's not working

    is it possible to make a script for common.css editing ?


  • Moderator

    @chombor Looks good. It should be working. You did restart your browser to load this, right?


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.