@dpn said in Guide | Modding Vivaldi:
Where is browser.html on macOS Big Sur ?
Found it. Just in case anybody else is wondering...
Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/Current/Resources/vivaldi/browser.html
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
https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/
I like to keep things brief so it is easy to see what is doing what in one sight, so here's what I use:
@echo off
REM make current directory work when run as administrator
cd "%~dp0"
set installPath="C:\Program Files\Vivaldi\Application\"
echo Searching at: %installPath%
for /f "tokens=*" %%a in ('dir /a:-d /b /s %installPath%') do (
if "%%~nxa"=="browser.html" set latestVersionFolder=%%~dpa
)
if "%latestVersionFolder%"=="" (
pause & exit
) else (
echo Found latest version folder: "%latestVersionFolder%"
)
if not exist "%latestVersionFolder%\browser.bak.html" (
echo Creating a backup of your original browser.html file.
copy "%latestVersionFolder%\browser.html" "%latestVersionFolder%\browser.bak.html"
)
echo copying js files to custom.js
type *.js > "%latestVersionFolder%\custom.js"
echo patching browser.html file
type "%latestVersionFolder%\browser.bak.html" | findstr /v "</body>" | findstr /v "</html>" > "%latestVersionFolder%\browser.html"
echo ^<script src="custom.js"^>^</script^> >> "%latestVersionFolder%\browser.html"
echo ^</body^> >> "%latestVersionFolder%\browser.html"
echo ^</html^> >> "%latestVersionFolder%\browser.html"
pause
Naturally, it must be run as administrator if the installation directory is Program Files, as in here. It patches only one installation, so if you use multiple and want to patch them all, each installation will require its own batch file (or you could copy paste inside the same file, to patch different installations in one go).
Unlike the first post, it doesn't require a patched browser.html along with the .js files to copy; instead, it patches browser.html every time, by removing the lines </body> and </html>, adding <script src="custom.js"></script> and then readding </body> and </html>. So if Vivaldi changes browser.html in new versions, those changes are kept.
All .js files in the same folder as the patch file are combined into that custom.js file. If you want to keep the patch batch file somewhere else, just create a shortcut at where you want it to be; I had to create a shortcut anyway, in order to make it run as administrator whenever clicked. But if you really don't want to keep the batch file in the same folder as your mods, you could also specify it separately:
@echo off
set modPath=C:\Users\debiedowner\Documents\Vivaldi\JS\
set installPath=C:\Program Files\Vivaldi\Application\
echo Searching at: %installPath%
for /f "tokens=*" %%a in ('dir /a:-d /b /s "%installPath%"') do (
if "%%~nxa"=="browser.html" set latestVersionFolder=%%~dpa
)
if "%latestVersionFolder%"=="" (
pause & exit
) else (
echo Found latest version folder: "%latestVersionFolder%"
)
if not exist "%latestVersionFolder%\browser.bak.html" (
echo Creating a backup of your original browser.html file.
copy "%latestVersionFolder%\browser.html" "%latestVersionFolder%\browser.bak.html"
)
echo copying js files to custom.js
type "%modPath%*.js" > "%latestVersionFolder%\custom.js"
echo patching browser.html file
type "%latestVersionFolder%\browser.bak.html" | findstr /v "</body>" | findstr /v "</html>" > "%latestVersionFolder%\browser.html"
echo ^<script src="custom.js"^>^</script^> >> "%latestVersionFolder%\browser.html"
echo ^</body^> >> "%latestVersionFolder%\browser.html"
echo ^</html^> >> "%latestVersionFolder%\browser.html"
pause
But then you would need to modify the script if you ever rename/move your mod folder; the first script above doesn't have that problem.
Thanks a lot that's almost exactly what i was trying to achieve !
i spent some time trying to style it on my own but there was some inline CSS positionning each tab every 30px i couldn't deal with... looks like the transform:scale method i was about to give a try tonight was the right answer actually !!
thank you for sparing me the hard work ^^
i might just try to add the close tab button back... even though i can double click tabs to close them...
edit : lol i just had to bring the close button back to the left and voilà !
CSS hack stopped working in vivaldi 4.0. now it's just reduces webpage space without shrinking the bookmarks bar.
is there a possible solution?
/* moves main window left to fill gap left by reducing left toolbar */
#webview-container {
margin-left: -33px !important;
}
@tonialb You need to open settings in a tab for the modification to work. It’s mentioned in the description. Once you enable it it will work. Don’t forget to restart Vivaldi after installing all the files and making the changes, but I guess you did that already.
@bloodyelf
You can drag-drop using this one instead.
@nomadic posted a CSS on 2/2.
https://forum.vivaldi.net/topic/25453/multiple-row-tabs/101?lang=ja&page=6
@sallyk Yeah I do that for the old Tabs on Bottom CSS code I'm currently using on version 3.8. But the new one just makes every window in Vivaldi go blank and not show any kind of webpage.
I'll try it again, maybe that setting got unset with the update for some reason.
Update: Okay figured out why it's not working, I had tabs set to Bottom in the settings yet the new CSS expects the settings to be put to Top for it to work. The old CSS would have the tabs location set to Bottom and then reposition the tabs to the top just below the address bar.
Seems like the original creator of this mod has been updating it. Works, as of 4.0, but Accent Color from Active Page is broken. You might want to take some stuff from this, it's pretty good.
Here's the Github link, just check out releases or download it manually.
@nomadic Thank you very much for adopting this mod - it really has made using Vivaldi so much easier again. It would be nice if you could match the colours across the bookmark bar as well, but it's minor thing.
There's one other problem I have, and I don't know if it's just me, or if there's some setting I can change, but my Show Closed Tabs and Synced Tabs are stuck a couple of cms in from the right, because it's still leaving room for the window controls. Is there anything that can be done to put them over to the edge of the window?
If not, please don't worry, as it is, it's so much more usable than it was before.
Good news, bug is partially fixed! Bravo V team!
Pls fix the other half of the bug when u force the large panel width to fit into small window width, but forgot about it's content's width.
Basically, the min-width need to be 100% instead of whatever size u have calculated with js. (It's broken in above situation).
reference:
.normal .panel-group .panel-collapse-guard {min-width: 100% !important;}
Screenshot:
panelbug 11.png
