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\"
should note just tried it on High Sierra but nothing happened
found this in MacPilot :
defaults write NSGlobalDomain AppleUseCoreUI -bool false
brb (hopefully) going to try...
im back.. nothing happend..again
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.
@sjudenim Yeah, as mentioned in the original post, you gotta use a tab for the new version. The reason is that the chrome api in use doesn’t trigger on popup windows. The old version will continue to work in the popup with your trick of applying it to window, because it checks for elements on click. There is the possibility to make it work both in tabs and windows and also in settings/all, but that would require additional independent checks and likely the use of language specific attributes. It’s far less overhead with the restrictions in place—and backups or restoring isn’t usually done on a daily basis, so I figured users can just switch to the tab version for the backup, while otherwise using the popup.
@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.
I reworked this mod, updated original post. Will only work with settings in a tab and by directly visiting vivaldi://settings/themes. The overview vivaldi://settings/all won't trigger the mod. Compatibility mode has been removed.
@barbudo2005
That is the browser.html. As I said, that loads the files with all the code. The element you want to view is found in common.css. That's the file that styles the browser. But you can see most of it's contents in Dev Tools. Right click on the elements you want to inspect (sometime you will have to expand elements to reveal the bits you want to find). On the right side will be the css, that's where you can make live edits to see the result. Any changes you make in Dev Tools will need to be made in a custom css file that you will load with browser.html by adding a line of code to that file
Does anyone knows why the js code (in this post) broke with the last update?
From this:
it turned to this:
I think that it has to do with the toolbar selector:
toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
@Spyderr I tried to replace the div.toolbar-addressbar with your suggestion (.UrlBar) but it didn't change anything..
EDIT: My bad!
I forgot to re-copy the fixed code...
@Spyderr It does work. Thanks allot!
