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

    • 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

    Yes, we know. We are discussing ways to make your life easier here, but for now your files will get wiped after each update, hence you will need to copy your 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. We will let you know about them shortly in a followup post. ;)


    Have fun making Vivaldi truly yours!



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



  • 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?! :O
    (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.





  • @Christoph142 said in Modding Vivaldi:

    ...
    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: :silly:

    To add some new style to Vivaldi do the following:
    [ol]

    • open browser.html
    • inside the head element, add the following line:(you can name the file as you like of course and also add multiple ones one line at a time)
    • finally add the custom.css file into the style folder
      [/ol]

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

    Adding new functionality works very similar:
    [ol]

    • open browser.html
    • inside the body element, add the following line:(again you can name the file as you want and also add multiple ones one line at a time)
    • finally add the custom.js file into the folder of browser.html
      [/ol]

    And you're all set.
    ...

    I'm very new here but in the part I've quoted from the first post, isn't something missing in the line which has

    inside the head element, add the following line:(you can name the file as you like of course and also add multiple ones one line at a time)

    There's mention of "add the following line" but something seems to be missing after that in both the custom.css and custom.js instructions above.



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



  • @Christoph142 said in Modding Vivaldi:

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

    Thank you!



  • The original post didn't survive the transition to the new forum, I think it should be updated.



  • edit: deleted -- not needed anymore, since OP has been updated


Log in to reply
 

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