Modding Vivaldi

sethjbr

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?

Hadden89

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

imclerran

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 vivaldi.app appear to contain a similar path.

Where would I find browser.html on OSX?

imclerran

@gwen-dragon said in Modding Vivaldi:

Search in /Applications/Vivaldi.app/Contents/Versions/{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.

imclerran

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

Christoph142

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

DissidentRage

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?

LonM

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

DissidentRage

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

LonM

@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

donny110

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

LonM

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

donny110

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

LonM

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

AltCode

Is there a limit to the number of js files that Vivaldi can use? I tried adding 3 separate custom.js files but Vivaldi only used the first two on the list. How about custom.css files? Is there a limit for that as well?