Modding Vivaldi

Hadden89

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?

luetage

@altcode Show your browser.html file. Generally there should be no limit, it could be you have a mistake in there somewhere. On the other hand there isn't really a point in running multiple custom.js or multiple custom.css files, unless you really have a huge amount of code and want to separate it.

AltCode

@luetage Here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vivaldi</title>
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="style/other.css" />
    <link rel="stylesheet" href="style/webpanel-fix.css" />
    <link rel="stylesheet" href="style/search-panel.css" />
  </head>
  <body style="
    background-color: #263238;
    background-image: url('resources/vivaldi-splash-icon.svg');
    background-size: 16%;
    background-position: center;
    background-repeat: no-repeat;">
    <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>
    <script src="extension-toggle.js"></script>
    <script src="vivaldi-icon.js"></script>
  </body>
</html>

I removed the second one extension-toggle.js, and the last one started working.

luetage

@altcode Strange, anyway – you should combine the custom.js files into one. They all just need one instance of the wait loop, you can just load all the functions at the same time. And if you wanna disable one, you just take it out of the loop.

jailbreaking

@bubek said in Modding Vivaldi:

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.

where do you ad this parameter?

Hadden89

@jailbreaking Vivaldi shortcut (Just look at step 2)

molex

Hi. I want to try change thumbnails to apple-icon-logo, can I do this by bundle.js? I find site "The Favicon Finder", with it I can get any icon from any site by forming a request "https://besticon-demo.herokuapp.com/icon?url= ... &size=". I want the browser to save the icon received from the site instead of the screenshot.