In this script i can only use one custom.css and one custom.js file. What to do hen there are multiple files.
I'm trying to install betterNotes Mod ehich have 5 files.
I wanted to share my current setup. Don't know how many Vivaldi modders are out there using macOS, but I hope it will help at least some of you automate the most repetitive tasks. Following a complete rundown of the steps required:
Get your files ready. Personally I'm using 3 individual ones.
upviv.sh to patch the application whenever an update has finished installing.
modviv.sh to startup Vivaldi when you want to inspect its UI.
bakviv.sh to backup the files you are currently working on outside the browser
The files use the extension .sh so they get opened by your default text editor automatically. I keep them on Dropbox just like custom.css and custom.js for backup. To run these scripts we will have to make them executable and change the file extension.
In Terminal open the directory you have saved the bash scripts to and issue following commands:
chmod +x upviv.sh
chmod +x modviv.sh
chmod +x bakviv.sh
Now copy them and change the extension to .command instead of .sh. By default this will run them in your Terminal.
We could leave it like that and just double click the files to execute, but a more elegant solution is to run them directly from the terminal as commands…
After making each file executable copy all of them to this directory /usr/local/bin/
Delete the filename extension .sh
Optionally tag each file so you can find it more easily.
Now each command can be run from terminal by just typing its name.
Below are the example files. Exchange PATH_TO_FILE for your own path. To get a full path you can drag and drop a file into terminal. Adapt these examples to your needs, make your own.
upviv.sh
#!/bin/bash
# Quit Vivaldi
osascript -e 'quit app "Vivaldi.app"'
# 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
cp /PATH_TO_FILE/custom.css "$findPath"/Resources/vivaldi/style/
cp /PATH_TO_FILE/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 custom files in text editor
open "$findPath"/Resources/vivaldi/style/custom.css
open "$findPath"/Resources/vivaldi/custom.js
# Open Vivaldi
open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
modviv.sh
#!/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
bakviv.sh
#!/bin/bash
findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`"
cp "$findPath"/Resources/vivaldi/style/custom.css /PATH_TO_FILE/custom.css
cp "$findPath"/Resources/vivaldi/custom.js /PATH_TO_FILE/custom.js
echo Backup completed.
@Jack9 I did mention that the original script and the one I posted are two separate things. Don't try to combine. Use one or the other, depending on what you want to do.
Something to keep the image at the correct position when you have it set to your desktop wallpaper (is not expected to work correctly on multi-screen setup):
(function() {
function update() {
let body = document.body;
if (body) {
body.style.setProperty('--screenHeight', screen.height);
body.style.setProperty('--screenWidth', screen.width);
body.style.setProperty('--windowTop', window.screenTop);
body.style.setProperty('--windowLeft', window.screenLeft);
}
setTimeout(update, 1000);
}
update();
})();
CSS to add:
#app {
background-size: calc(var(--screenWidth) * 1px) calc(var(--screenHeight) * 1px);
background-position: calc((0 - var(--windowLeft)) * 1px) calc((0 - var(--windowTop)) * 1px);
}
It seems that this was pretty useless as I forgot to check command line switches. The only plus this mod has is that it tries to automatically use the latest version number (and it is no too difficult to get).
@sirien-neiris
well, actually - Vivaldi DOES have the option for disappearing Status bar and for no status bar but showing info overlay. It's both in settings. My original problem was, that there is no shortcut for switching between showing info overlay and showing status bar (only for switching status bar on/off).
I did made similar request like yours ages ago but it never got pick up by V team. Luckily, I learn to mod Vivaldi with CSS later, so I decided to try DIY, & eventually end up with something even better than what I initially wanted. LOL
\
The behavior of this mod is way better than "showing info overlay" option from standard settings. My complain above was, that I don't get why this is not the default behavior of status bar for this "info overlay" option, not why it is not default as such.
I think my previous post have address this, the behavior of invisible/hidden GUI is too unpredictable for most user (thus it need a lot of education & promotion to be adopted by masses successfully); & it's also not TOUCH friendly so it will cause problem for those who rely on touchscreen to interact with apps. Mobile is the norm for accessing the Internet now & touch screen is getting more common for laptop & desktop, so modern browser GUI design will always need to be touch friendly.
Anyway, you can made a request about this in the request forum & point 'em to this mod. Hopefully some dev will see this & adopt this mod as overlay mode behavior. But I won't hold my breath waiting for it...
Using the button title method doesn't always work for me, especially with dynamic buttons as their title changes. With the Class Name mod I do not have this problem.
If you use this mod https://forum.vivaldi.net/topic/36028/class-name-buttons?page=1, you can use this to place the reload button in the addressfield
function reloadStyle() {
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.toolbar .button-toolbar.reload {
order: 8;
fill: var(--colorFgFaded) !important;
margin-top: -3px
}
.toolbar .button-toolbar.reload svg {
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
};
setTimeout(function wait() {
const adrField = document.querySelector('.addressfield');
const reload = document.querySelector('.button-toolbar.reload');
if (reload) {
adrField.appendChild(reload);
reloadStyle();
} else {
setTimeout(wait, 300);
}
}, 300);
well i have it working - standard version of Vivaldi worked perfectly - install latest snapshot and all i got was a grey screen that would not go away - both using common user data
so start from clean install on standard build and build user data adding all css and js mods and all worked as expected
port that user data file dir to a snapshot install and all is good
conclusion - i have no idea - the old user data was good i thought but obviously something was wrong
@Pesala I'd be really happy if I could help you, but I'm not really sure 'cause it's in settings (not a static part of the browser) and... it's late and my mind doesn't want to do more than needed.
Yes, it is, but it's a nice easter autumn egg.
@nparekh …and that’s the problem: I see I should do something and just ignore it 'cause that’s my way to avoid stress. (Today I realised one of the two projects should be done tomorrow — and all I have already done is making a folder for it.)… so I hope I will use the stress I got in today also tomorrow to finish the other project and start modding again (but that’s never gonna happen ).
