Modding Vivaldi

Бывший пользователь

@luetage well, then expect no bug reports from me . from then on, v is gonna work perfectly.

Kikey

Hello is there a way to wait for the browser to fully load before executing the script?

document.querySelector('#panels-container').style.order = '4'
document.querySelector('#tabs-tabbar-container').style.order = '2'
document.querySelector('#webview-container').style.order = '3'

var tabBar = document.querySelector('#tabs-tabbar-container')
var inner = document.querySelector('div.inner')
var toggleBar = document.createElement('span')

toggleBar.className = 'toggleBar'
inner.appendChild(toggleBar)

tabBar.style.position = 'absolute'
toggleBar.style.position = 'absolute'
toggleBar.style['z-index'] = '3'
toggleBar.style.width = '20px'
toggleBar.style.height = '100%'
toggleBar.style.order = '1'
tabBar.style.height = '100%'

toggleBar = document.querySelector('span.toggleBar')

toggleBar.addEventListener('mouseenter', () => {
  document.querySelector('span.toggleBar').style.width = '0px'
  document.querySelector('#tabs-tabbar-container').style['z-index'] = '2'
})

document.querySelector('#tabs-tabbar-container').addEventListener('mouseleave', () => {
  document.querySelector('#tabs-tabbar-container').style['z-index'] = null
  document.querySelector('span.toggleBar').style.width = '20px'
})

I've got the following script which hides the tabbar (mine on the left) but it always returns Cannot read properties of null (reading 'style') probably because the tab bar hasn't been loaded yet.

So how can I wait for the browser to finish loading before executing the script? Thanks.

luetage

@kikey See ☛ https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools/. The Javascript “Hello, World!” example shows a simple way on how to wait for the UI.

Kikey

@luetage Thank you so much!!

stardepp

Since the Vivaldi hooks are currently not working since the update to Vivaldi 4.3, I am trying to install my .js modifications the traditional way again. But I have forgotten the details. I put my .js motivations in the file
custom.js.

Then in browser.hmtl I inserted this line.

browser.html - Editor-stgru 08-10-2021 12_45_05.jpg

With files I have then inserted into this Odner:

C:\Users\user\AppData\Local\Vivaldi\Application\4.3.2439.44\resources\vivaldi

What have I forgotten? Was there something else with devtools.js ?

luetage

@stardepp You are patching a single file named custom.js into the application. If you want multiple files, you need an entry for each file with the exact file name.

stardepp

@luetage said in Modding Vivaldi:

@stardepp You are patching a single file named custom.js into the application. If you want multiple files, you need an entry for each file with the exact file name.

Where should I put the exact file names?

luetage

@stardepp You have two files, one named file1.css and the other file2.css. You copy both files into the application, you know the correct place already. In browser.html you make 2 lines instead of one, one with file1.css, the other with file2.css.

stardepp

@luetage But I have written about 9 .js modifications in custom.js, as I was taught earlier.

luetage

@stardepp If you have only 1 file, then your setup is fine. Something just doesn’t work out and there might be issues. Make a separate topic and post your code, I’ll take a look at it.

stardepp

@luetage https://pastebin.com/0K0xDrV0

dude99

@stardepp if u r using Windows, then learn to use this: https://forum.vivaldi.net/post/241847

Once u install all the js u wanted, made a Backup (save as zip with the client), then u can easily apply patch to Vivaldi after update with Restore button.

stardepp

@dude99 said in Modding Vivaldi:

@stardepp if u r using Windows, then learn to use this: https://forum.vivaldi.net/post/241847

Once u install all the js u wanted, made a Backup (save as zip with the client), then u can easily apply patch to Vivaldi after update with Restore button.

Ok, I am doing my best to learn this.

stardepp

@dude99 By the way...I was able to successfully reinstall my .js modifications

Subtropinka

Don't know where I shall to ask my question... So I write it here)

How to make size of inactive tab minimal, at least 30 px? It's awful to open too many tabs...
How to put navigate buttons between address bar and search bar?
How to make length of address bar much smaller?

luetage

@subtropinka Open a new topic, this is for installation instructions.

Subtropinka

Это сообщение удалено!

sadeghpetros

@dude99 , @luetage Hi , how are you?
i want to modding vivaldi but i can't
my os is ubuntu
when i create the css file and select the folder for vivaldi next i restart vivaldi but don't set the change

this is code in css file:

.window-minimize svg path {
    d: path("M 9.7217725,0.46551385 C 9.7217757,3.1193029 7.5704552,5.2706255 4.9166661,5.2706248 2.2628775,5.2706249 0.1115576,3.1193025 0.1115608,0.46551385 c 5.81e-5,-2.65374525 2.15136,-4.80500005 4.8051053,-4.80500005 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.80500005 z");
}

.window-minimize svg {
    height: 10px;
}

.window-maximize svg path,
.window-close svg path {
    d: path("M 9.8194288,4.9088733 C 9.819432,7.5626623 7.6681115,9.7139849 5.0143224,9.7139842 2.3605338,9.7139843 0.20921385,7.5626619 0.20921705,4.9088733 0.20927515,2.255128 2.3605771,0.1038732 5.0143224,0.1038732 c 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.8050001 z");
}

.window-maximize svg path,
.window-minimize svg path {
    fill:#2b2b2b;
}

.window-close svg path {
    fill: #f25e5e;
}

button.window-maximize,
button.window-minimize,
button.window-close {
    width: 36px !important;
    padding: 0px !important;
}


button.window-maximize:hover,
button.window-minimize:hover,
button.window-close:hover {
    background: transparent;
}

.win10 #tabs-container.top {
    padding-right: 110px;
}

and the folder :

my os:
Screenshot from 2022-02-19 11-24-23.png

luetage

@sadeghpetros CSS changes window buttons and the install path appears to be correct. You don’t have to restart, opening a new window is enough. Not sure why it doesn’t work for you.

You can do a bit of troubleshooting however.

Follow instructions to load devtools for the UI here ☛ https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools
Open devtools and the »sources« tab
Look at the sidebar and open »vivaldi-data«, then open »css-mods«. Your file should be visible there.

Try this code for a sanity check: .toolbar-mainbar {background-color: red !important} (colors your address bar red)

sadeghpetros

@luetage Hi
Thanks for the help, right now is ok

Modding Vivaldi

◊ More CSS Mod ◊