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

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?

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?