Modding Vivaldi

Christoph142

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

Adding Style (CSS)

Open vivaldi://experiments
Enable "Allow for using CSS modifications".
Open Appearance section in settings.
Under "Custom UI Modifications" choose the folder you want to use.
Place your CSS files inside this folder.
Restart Vivaldi to see them in effect.

IMPORTANT:
The CSS files can't have spaces in the filename or they won't work. Spaces in directory/path names should work but try to avoid it just in case.

Also, make sure the file(s) are actually named .css - if you're on Windows make sure file name extensions are set to show, read this article:
How to Make Windows Show File Extensions.

Adding Functionality (JS)

There is only one single file in Vivaldi that you should ever need to modify. This file is called window.html and located at:

<YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi

You should back it up before you fiddle with it.

You did the backup, right? OK, here's the fun part:

Open window.html, and inside the <body> element add the following line:

<script src="custom.js"></script>

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 window.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 window.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

Purely visual modifications (CSS files) will keep getting loaded automatically after any updates.

Functional changes (JS files) however will get wiped after each update, hence you will need to copy these files into the appropriate folder 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 for all platforms that can do the job for you, though. Have a look at these batch/shell scripts.

Have fun making Vivaldi truly yours!

--
ModEdit: Title
ModEdit: Removed section for 2.5 and earlier
ModEdit 30 Aug. 2023: Updated for 6.2, minor edits
ModEdit 2 Sep. 2024: Clarified note about file extensions in Windows.

Hadden89

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

Christoph142

That's one option, yes.

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, inherited at every Vivaldi update.

Hadden89

@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?)

iAN CooG

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

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.

A Former User

@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.

bubek

http://gifok.net/image/8YLM

Christoph142

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

sjudenim

@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

Sparrows

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 ?

Pathduck

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

luetage

@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.

sethjbr

@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

Pathduck

@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.

Pathduck

@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.

sethjbr

@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...

chombor

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 ?

Christoph142

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