Modding Vivaldi

DarylO

@Hadden89 Okay. Well, I'll try to figure it out on my own, then.

Hadden89

@DarylO This could work

#browser.linux,
#browser.linux + div,
#browser.linux + div + div,
#browser.linux button,
#browser.linux input,
#browser.linux select,
#browser.linux textarea {
  font-family: Ubuntu, system-ui, sans-serif !important;
}

Replace Ubuntu with the font you need.

DarylO

@Hadden89 I would just delete 'Ubuntu' as the font I would want to use is the one I had selected for my system-ui. Are you saying I should include all the other text in my custom.css file, as well?

Hadden89

@DarylO I just looked how vivaldi pick the font in common.css and overrided with the !important so the working code should be that. If you know the name of your font is better, as if you don't fill it, Vivaldi still may use Ubuntu

DarylO

@Hadden89 Thank you!! That did the trick. Originally, I just had the following, and that wasn't enough.

#browser.linux textarea {
font-family: system-ui, sans-serif !important;
}

DarylO

@Hadden89 Why do you think all the other text was needed? By the way, I took out " !important" to see if it would still work, and it does.

Hadden89

@DarylO Because the default font is on various browser elements and each line will modify only a small part of the interface - so they work together.

DarylO

@Hadden89 Thanks for the explanation!

sjudenim

@DarylO

If you want to make a change across all elements you can also use this rather than listing them all

* { font-family: Fira Code, system-ui, sans-serif !important; }

DarylO

@sjudenim Thank you. That worked, too! (The !important tag, however, wasn't necessary in this case.)

DarylO

@sjudenim I had to revert to Hadden89's suggestion as I noticed that there was a single little element in Vivaldi Mail that remained in the Ubuntu font.

sjudenim

@DarylO

Normally if you are changing a value using the exact same selector as found in the common.css , you will need to add the !important declaration. If you use a different selector that effects the same thing, then it is not necessary, but there are times when the common.css has an !important declaration. In those cases you will need to use !important to ensure your value takes precedence even if it's using a different element name.

Did it still not work for you when added that declaration back?

DarylO

It was okay after I had put the !important declaration back in.

Maxrunner

it seems you cant debug javascript?

code3

@Christoph142 Could you add a note about the thing with the timers to make sure the mod works? I just found this out and it would have helped to have it here.

Christoph142

@code3 I don't have the slightest idea what you're talking about.

code3

@Christoph142 Oh, sorry. See here: https://forum.vivaldi.net/topic/58888/help-with-js-error/3?_=1616956787037. It has to do with Vivaldi using react and dynamic rendering. If you don’t make js mods maybe @Gwen-Dragon can edit it or it could be a separate post, though personally I think it does belong in this “how to” post.

luetage

@code3 This is already exemplified in inspecting ui with devtools. It should also be noted most mods need different initiation functions nowadays. Setting a timeout, or calling the function repeatedly, on browser start won’t get you far when Vivaldi removes your elements regularly. Our approaches have changed significantly over time, because the browser has changed.

code3

@luetage I think you mean this:

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        console.log('Hello, World!');
    }
    else {
        setTimeout(wait, 300);
    }
}, 300)

I did not see that. I think maybe you could explain why this timer is necessary, and that other workarounds may be necessary in other cases in order to write vanilla js on top of React.

luetage

@code3 There’s no all‐in‐one solution and neither this guide, nor the other one try to teach people coding. To me it seems like the Vivaldi team doesn’t want people to mess with the code in the first place, that’s why only CSS modding is officially supported – and only as an experiment. The entry barrier to modding Vivaldi is high, but you can learn by doing. On one side it’s far easier than a few years back, because so many mods already exist you can learn and copy from, on the other side Javascript‐ and to an extent CSS modding has become harder overall. Many CSS selectors in the UI have disappeared, in favor of tightening up the code and speeding up the UI (which could be argued…) and most of the elements in the UI get removed instead of being toggled with CSS. There’s no good way to do a how‐to, the how‐to are in a way the existing, maintained mods itself.