In this topic are many advanced and sophisticated batch scripts. I just wanna remind people we can do a minimum and be fine too. Following script just copies the js file over to the snapshot directory and makes the according entry in browser.html. Nothing more, nothing less. Don’t run it twice on the same version. Nowadays css can be loaded native, therefore I avoided it here.
#!/bin/bash
snapshot=/opt/vivaldi-snapshot/resources/vivaldi
sudo cp /home/path/to/moddir/uimod.js $snapshot
sudo sed -i -e 's/<\/body>/ <script src="uimod.js"><\/script>\n <\/body>/' "$snapshot/browser.html"
I'd like to share mine too... actually, is a "fork" from @luetage 's approach, but using hard links, which doesn't require a backup step, since the original file will remain intact in case of deleting.
viv-inspec.sh (Used for open Vivaldi in "develop mode")
#!/bin/bash
osascript -e 'quit app "Vivaldi.app"'
read -rsp $'Press [Enter] to restart Vivaldi...\n'
open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
viv-patch.sh (Used for patching the custom files on the current version of Vivaldi)
#!/bin/bash
# Quit Vivaldi
osascript -e 'quit app "Vivaldi.app"'
# Find current path
here=$(pwd)
# Find path to Framework folder of current version and save it as variable
findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`"
# Copy custom files to Vivaldi.app
ln "$here"/files/custom.css "$findPath"/Resources/vivaldi/style/
ln "$here"/files/custom.js "$findPath"/Resources/vivaldi/
# Save path to browser.html as variable
browserHtml="$findPath"/Resources/vivaldi/browser.html
# Insert references, if not present, and save to temporary file
sed 's| </head>| <link rel="stylesheet" href="style/custom.css" /></head>|;s| </body>| <script src="custom.js"></script></body>|' "$browserHtml" > "$browserHtml".temp
# Backup original file
cp "$browserHtml" "$browserHtml".bak
# Overwrite
mv "$browserHtml".temp "$browserHtml"
# Pause script
read -rsp $'Press [Enter] to restart Vivaldi...\n'
# Open Vivaldi
open /Applications/Vivaldi.app
@Christoph142 Thanks for your script! I've got the problem, that the browser.html file is found and also a backup is created, but there is no browser.html file after executing the script but only browser.bak.html. Do you have an idea why this happens?
As you can see it says invalid path. But the backup is still created, what surprises me ^^
This are the changed lines:
:: This is the folder that contains your modded files (make sure it uses similar folder structure):
set "modFolder=D:\Vivaldi Snapshot\Mods - JS\"
:: This is a list of your Vivaldi installations' Application folders (you can use the Vivaldi folder, too, but it takes longer to find the file):
set installPaths="D:\Vivaldi Snapshot\Application\"
You can exclude hover tab from dimmed effect with #browser .tab-position .tab:not(.active):not(:hover), that way you can read the tab title better when needed.
Also, I think your mod will work really well with my indent hibernated tabs mod because we also need an easy way to identify dimmed & hibernated tabs.
@luetage as long as Vivaldi doesn't get this implemented as a built-in feature, the workaround is okay, as long as we know how to use it.
A bit OT: I always wondered why Vivaldi has no proper backup function, would be a major pro for Vivaldi if you could just click and backup/restore all of the customizations we've made. Sometimes I'm starting from scratch to get rid of some orphaned stuff that accumulates over time, and a backup of just what I customized would come in very handy then. Now it's a PITA to set it up all again. On several machines Win/Lin it takes some time to get it all back like I want it to be.
So, thanks for your scripts! Makes things a tad easier for me.
Update: Currently, the latest v3.3.2x stable version have a bug that causing the #webview-container to move together with the position RIGHT & absolute tab bar during translateX().
Thus, if you are using RIGHT position tab bar, then replace position:absolute; height:100%; with position:fixed; height: calc(100% - 26px); to fix it temporary . You might need to adjust the 26px to increase/decrease the height of the tab bar according to your custom setup.
Alternatively, you can install Side Tab Trashcan mod to move the Trashcan & Sync tabs icon to the side to solve the missing trashcan & sync tabs icon problem which cause by fixed position tab bar.
I would like the URL to also contain the "www". So I found this in this topic:
.theme-1.addressfield-mask .host .host-sub:not([data-host-sub="www"]) {
color: var(--colorHighlightBg);
}
But that does not work for me. How can you change that so that it works?
Furthermore, it would be very good if the "hhtp://" was colored green. How can you implement this?
@Gwen-Dragon said in In snapshot 2056.19, JS scripts for extending the VIVALDI functionality stopped working.:
And what can users do to fix it? You patched a JS script?
Yes. I have most JS scripts related to the navigation button panel and the basket panel.
Replaced the identifiers of these panels with new ones:
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-large
and
.toolbar.toolbar-tabbar.sync-and-trash-container .
@BoneTone Concretely this post. @daniel2 I think you’ll only want the first part of the selector to apply your changes to all favicons of this kind (bookmarks, settings…).
Just note, nicknames must be unique, otherwise they wouldn't be able to function this way. To add notes, or sort of "tag" bookmarks with keywords like perhaps the name of a project, you can use the description field.
One last feature of the bookmarks in Vivaldi that might not be obvious is that the Speed Dial is nothing more than a bookmarks folder with the speed dial attribute set. You can have multiple speed dials, just check the box when editing a folder. I typically have around 8-10 speed dials depending on my work at the time, about 6 permanent and 2-6 for current projects... plus the mobile speed dial.
@drannex42 It is really strange, but today I, too, couldn't reproduce the issue I had previously. I guess it was something on my end and it somehow fixed itself. Puzzles me. But now everything works fine!
Thank you again for your time and work.
Vivaldi's interface is written using React, and bundled into a bundle.js file (there might also be other files; I'm not familiar with React). Because of this, it's easier but potentially slower to use a script (or CSS, in some cases) to modify the order in which items appear in the user interface.
@LonM Tis all happy & yummy now also in Snapshot.
Furthermore late arvo i gave in & deployed what i had told myself 24 hours ago that i simply did not need ... alas i am weak-willed & so now both V's also happily have your uber geek-chic sessions panel: https://forum.vivaldi.net/topic/28102/advanced-panels-mod-with-sessions-panel?page=1
This is all rather fun, heehee.
@nomadic said in tabs below address bar and overlay menus:
@barefootcoder As @luetage and @potmeklecbohdan said, there was a change in the CSS selectors. The 2 posts above yours in this thread talk about the solution.
From the CSS I posted earlier in the thread, there is only one change that needs to be made (unless I missed something)
Old
New
.toolbar.toolbar-addressbar { order: -3; }
.toolbar.UrlBar { order: -3; }
Ah, good eye ... I swear I had changed that, but I guess I missed it, or copy-pasted something on top of it or something. Thx for helping me find it! That totally fixes the problem.
