Modding Vivaldi

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

This post is deleted!

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

iAN CooG

From the latest 5.2 snapshots, I noticed that the app https://forum.vivaldi.net/topic/30984/windows-vivaldi-mod-manager doesn't work anymore because browser.html changed slightly, in the <body> element:

  <body>
    <div id="app" />
    <!-- defer all script loads until the dom is ready -->
    <script defer src="vendor-bundle.js"></script>
    <script defer src="background-common-bundle.js"></script>
    <script defer src="bundle.js"></script>
  </body>

I guess custom .js scripts must follow the same syntax, for example adding a custom.js will be

<script defer src="custom.js"></script>
<script defer src="bundle.js"></script>

luetage

@ian-coog No, it doesn’t. Just add the scripts to the bottom of the body tag as usual and do not use defer. Why the manager broke is another question. My patch script broke too because I checked for the word load to determine whether scripts have already been added. The word load is in the comment therefore the script broke. Might be something similar with the manager.

iAN CooG

@luetage said in Modding Vivaldi:

@ian-coog No, it doesn’t. Just add the scripts to the bottom of the body tag as usual and do not use defer. Why the manager broke is another question. My patch script broke too because I checked for the word load to determine whether scripts have already been added. The word load is in the comment therefore the script broke. Might be something similar with the manager.

OK I take your word, seems it works in both ways and I don't know the difference
As of now I just have added advancedPanels.js (by LonM) and backup-search-engines-NEW.js and they are working.

luetage

@ian-coog I’m not sure to be honest. In theory deferring would make sense, we could discard all the “waiting for UI” stuff. I tried it but some of the scripts failed, so I went back. This would need a more thorough investigation.

iAN CooG

NEVERMIND. 5.2.2623.12 reverted the browser.html format so now VivaldiModManager still works.
It's back to the old format

<script src="bundle.js"></script>

Traws

Hello i wanted to use vivaldi for some time but got one problem with it on linux mint. If im using system window borders i got that 3 buttons to close, minimize, maximize close to edge and dont need to point on close button just move move to top right edge and i want to be like that. But when using with system border windows i got tittle bar on top with that close buttons and then tabs card. So wanted to use vivaldi without system border windows to have on top tabs without tittlebar but then, close button is not on the edge, but little moved to left and down so i need to point to close browser. (ok maybe too complicated, sorry)

Can someone help with that with modifing css or something? i Just need to move that buttons to top right maybe 10px

luetage

@traws Create your own topic to ask for help, this is general modding. And if you do, try to explain it with the help of pictures. You might also want to look at inspecting Vivaldi (one of the pinned topics) to solve this yourself.

bariton

This post is deleted!

kanishknishar

Tried installing the last Vivaldi 4.xx version but somehow even after disconnecting my internet it auto updates to 5.2. Any idea of what to do next?

guigirl

@kanishknishar said in Modding Vivaldi:

Tried installing the last Vivaldi 4.xx version

Why? Completely unsafe action.
Why post this question in this thread? It's utterly irrelevant here.

kanishknishar

@guigirl Oops. Wrong thread. Apologies.

Modding Vivaldi

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...