Modding Vivaldi

  • @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>
    		<meta charset="UTF-8" />
    		<link rel="stylesheet" href="style/common.css" />
    		<link rel="stylesheet" href="style/custom.css" />
    		<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>

    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>

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

    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?

  • @chombor said in Modding Vivaldi:

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

    I think you can use dev tools to do some live inspection on common.css but..... it's better change things in custom.css
    Usually, I test the codes there - and if it works I update the custom.css file.

  • Awesome! This is a much cleaner solution than modifying the common.css file.

    However, I can't seem to locate the browser.html file in OSX. Neither application support/vivaldi nor appear to contain a similar path.

    Where would I find browser.html on OSX?

  • Moderator

    @imclerran said in Modding Vivaldi:

    Where would I find browser.html on OSX?

    Search in /Applications/{version}/Vivaldi Framework.framework/ subfolders.

    !!! But there is a script for Mac to do this patch for custom.css automatically.

  • @gwen-dragon said in Modding Vivaldi:

    Search in /Applications/{version}/Vivaldi Framework.framework/ subfolders.

    Perfect, thanks. As someone who spends most of their time in Windows, was not aware that the application directory referred to vivaldi framework.framework. I had found that file, but had not realized it was actually a directory.

  • Moderator

    @imclerran said in Modding Vivaldi:

    As someone who spends most of their time in Windows

    Well, similar I work most on Windows, often on Linux desktops+servers and see a Mac almost every 2 or 3 years to remember the correct paths.

  • @gwen-dragon good for you. Glad I could come to the Vivaldi forums for such great condescending help.

    Glad you could compare me admitting I don't know everything to a guy who thinks he knows everything. So thanks for that too.

  • @bubek said in Modding Vivaldi:

    Add a shortcut to Vivaldi parameter:

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

    Thanks for this. I just wanted to point out for other silly people like me that don't realize this is how you can inspect the UI is that you need to type --remote; what is quoted above is –remote. In other words, what you need is - - (without spaces) at the start. My eyesight must be waning or me to have not caught that initially.

  • Moderator

    @exaskryz It's way easier to just enable this flag, restart Vivaldi and right-click -> "Inspect" whatever you're interested in rather than doing remote debugging. 😉

  • I'm on Windows, and the Application directory doesn't exist inside %LOCALAPPDATA%\Vivaldi, only User Data, so I'm wondering if this article is out of date.

    Edit: I see now, this is saying to edit the actual application as it's installed. Say someone wanted their modifications to only apply to their own instance, will modifications made from %LOCALAPPDATA% be merged in with files within Program Files?

  • Moderator

    @dissidentrage Mods will only affect whichever browser.html you install them to. So if you change the one in %PROGRAMFILES%, and then open a Vivaldi installed to %LOCALAPPDATA%, it will be unaffected.

  • @lonm That's not the question, but its implications are disconcerting. The question I'm asking is if you have it installed in %PROGRAMFILES% whether changes made to %LOCALAPPDATA%\Vivaldi\Application will have an effect when you run it. Based on what you said, it would appear not; respecting OS permissions and the spirit of generally not interfering with the way other people use software, you can only make modifications if you have it installed locally rather than globally.

  • Moderator

    @dissidentrage Unless you've done something strange with symbolic links or junctions† then the program installed in %PROGRAMFILES% is completely separate to the one in %LOCALAPPDATA%\Vivaldi\Application. Changes to one won't affect the other.

    The only thing that will be common between them‡ is the user data directory (that's the bit that has your bookmarks, history and so on), but you won't install mods in that, so that's not an issue.

    To double check which location you've installed to, try launching Vivaldi and visiting the page at vivaldi://about and look at the Executable Path. This will tell you which directory you should add your mods to.

    Hopefully this clarifies my earlier post.

    †If like most people you don't know what that means, then you won't have done that, no need to worry
    ‡Unless you're using launch arguments† or the profile manager

  • I am not completely sure if this belong in this post but i'll ask here.. If it's incorrect placed I request a mod to please move it to the correct location (if possible). However I would like to ask if it is possible to mod vivaldi in such a way that the option to mute a page is always in the right click menu, since I tend to want to mute a tab before it starts playing, and so far been trying to get this done with extensions but honestly just having it available in a right click menu would be the most useful thing possible..
    Secondly if it is not, i've been testing css modifications but I can't quite get my head around one thing.. I want to move the mute icon to the right and hide the X button (since I use middle mouse for that), all the while not making the favicon dissappear (which was the issue I had last time when moving the mute icon)..
    Yes this might be alot, but I am absolutely not a programmer or have decent knowledge of CSS, still learning haha.

    Thanks in advance for any help offer whatshowever!

    p.s. Currently using the latest stable build

  • Moderator

    @donny110 Unfortunately, not possible with a mod. Vote for this FR as that's the only way this will happen.

  • @lonm Also the second part I asked with the css is not possible? I was kinda unhandy to post two or more questions in one post, but personally i'd rather make a large post then spam xD.

  • Moderator

    @donny110 Sorry, I completely missed that part! Start a new thread or search here for that. It should definitely be possible.

Log in to reply

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