Modding Vivaldi

plmach

Open the Javascript modification file in a text editor.

Open browser.html, inside the body element add the following line:
<script src="custom.js"></script>

I do, as I say, and it's didn't bang on start. Only if I open browser.html in already started Vivaldi.

Thnx for help anyway, continue trying.

luetage

@plmach Make a new topic on this forum board and post your current code there, then the community can help you properly.

Sparrows

I like the window sidebar for viewing all my tabs but; how can I customize so that I can change basically how it all looks ?

mahuaer

我尽然不知道尽然有如此强大的功能。非常棒

I will definitely not be strong because of this。。Great。

Ash6614

Idk much about css i just want to change the UI font, is there a place in the code i can just change it easily?

stardepp

@Ash6614 use this .css code and if you don't want this font, change all lines "Comic Sans MS" to your desired font.

/* Change Font to Comic Sans */

#browser.win,
#browser.win + div,
#browser.win + div + div,
#browser.win button,
#browser.win input,
#browser.win select,
#browser.win textarea {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ar),
#browser.win + div:lang(ar),
#browser.win + div + div:lang(ar),
#browser.win button:lang(ar),
#browser.win input:lang(ar),
#browser.win select:lang(ar),
#browser.win textarea:lang(ar),
#browser.win:lang(ku),
#browser.win + div:lang(ku),
#browser.win + div + div:lang(ku),
#browser.win button:lang(ku),
#browser.win input:lang(ku),
#browser.win select:lang(ku),
#browser.win textarea:lang(ku),
#browser.win:lang(fa),
#browser.win + div:lang(fa),
#browser.win + div + div:lang(fa),
#browser.win button:lang(fa),
#browser.win input:lang(fa),
#browser.win select:lang(fa),
#browser.win textarea:lang(fa) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ja),
#browser.win + div:lang(ja),
#browser.win + div + div:lang(ja),
#browser.win button:lang(ja),
#browser.win input:lang(ja),
#browser.win select:lang(ja),
#browser.win textarea:lang(ja) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-CN),
#browser.win + div:lang(zh-CN),
#browser.win + div + div:lang(zh-CN),
#browser.win button:lang(zh-CN),
#browser.win input:lang(zh-CN),
#browser.win select:lang(zh-CN),
#browser.win textarea:lang(zh-CN) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-TW),
#browser.win + div:lang(zh-TW),
#browser.win + div + div:lang(zh-TW),
#browser.win button:lang(zh-TW),
#browser.win input:lang(zh-TW),
#browser.win select:lang(zh-TW),
#browser.win textarea:lang(zh-TW) {
  font-family: "Comic Sans MS";
}

Bild Text

Ash6614

@stardepp OMG THANK YOU SO MUCH

luetage

@stardepp Comic Sans is targeted at children and takes inspiration from comic books. I can’t explain why Microsoft hates children so much and I don’t understand why anyone would do this to themselves on purpose : /

dude99

@luetage Millennial these days love cool crazy fun edgy stuff, that's why MS rebrand IE6 to something "edgey"... Just pray they don't go all woke like the tumbling fool Firefox. LOL

sjudenim

@stardepp said in Modding Vivaldi:

@Ash6614 use this .css code and if you don't want this font, change all lines "Comic Sans MS" to your desired font.

/* Change Font to Comic Sans */

#browser.win,
#browser.win + div,
#browser.win + div + div,
#browser.win button,
#browser.win input,
#browser.win select,
#browser.win textarea {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ar),
#browser.win + div:lang(ar),
#browser.win + div + div:lang(ar),
#browser.win button:lang(ar),
#browser.win input:lang(ar),
#browser.win select:lang(ar),
#browser.win textarea:lang(ar),
#browser.win:lang(ku),
#browser.win + div:lang(ku),
#browser.win + div + div:lang(ku),
#browser.win button:lang(ku),
#browser.win input:lang(ku),
#browser.win select:lang(ku),
#browser.win textarea:lang(ku),
#browser.win:lang(fa),
#browser.win + div:lang(fa),
#browser.win + div + div:lang(fa),
#browser.win button:lang(fa),
#browser.win input:lang(fa),
#browser.win select:lang(fa),
#browser.win textarea:lang(fa) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ja),
#browser.win + div:lang(ja),
#browser.win + div + div:lang(ja),
#browser.win button:lang(ja),
#browser.win input:lang(ja),
#browser.win select:lang(ja),
#browser.win textarea:lang(ja) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-CN),
#browser.win + div:lang(zh-CN),
#browser.win + div + div:lang(zh-CN),
#browser.win button:lang(zh-CN),
#browser.win input:lang(zh-CN),
#browser.win select:lang(zh-CN),
#browser.win textarea:lang(zh-CN) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-TW),
#browser.win + div:lang(zh-TW),
#browser.win + div + div:lang(zh-TW),
#browser.win button:lang(zh-TW),
#browser.win input:lang(zh-TW),
#browser.win select:lang(zh-TW),
#browser.win textarea:lang(zh-TW) {
  font-family: "Comic Sans MS";
}

Bild Text

You can also use a wildcard to reduce the code. For example, this is what I use to adjust the font across all elements of the UI

/* Fonts */
* {
  font-family: "Quicksand" !important;
  text-shadow: 0 0 .8px var(--colorFgAlpha) !important;
  letter-spacing: .1px;
}

stardepp

@sjudenim Thank you for this very valuable tip. And yes, it works well and reliably

Sparrows

How do I change the font size and the bookmark tab stack icon in the windows panel for bookmarks ?

Sparrows

How do you modify the window panel as I want to modify the tabs list within this panel ?

paul1149

I'd like to set up the search engine backup .js, mod, but apparently I need a browser.html file to amend, and I don't have one.

mib2berlin

@paul1149
Hi, if you don´t have one Vivaldi does not work.
On a Windows user install it is in:

/Windows/Users/username/AppData/Local/Vivaldi/Application/5.8.2936.3/resources/vivaldi/

Ignore the slashes, this is the view from Linux, in Windows it is .
On Linux it is in /opt/vivaldi/resources/vivaldi.

Cheers, mib

paul1149

@mib2berlin Thanks so much. I thought it was in the user profile. I have it now.

paul1149

Ok, I edited the browser.html to look like:

<body>
   <div id="app" />

    <script src="custom.js"></script>
    <script src="search_engine_backup.js"></script>
     etc...

Then I moved the file search_engine_backup.js to the same folder.

I reopened vivaldi, and I don't have the search engine backup button.

I have Settings opening in a tab, as the thread of search engine backup says to do.

mib2berlin

@paul1149
Is there a .css file involved too?
.css files are in the style folder .js files in the same as browser.html.
<script> scr=" .... is correct.

Cheers, mib
EDIT: By the way, it is always better to ask in the mod thread if something not work, asking for general questions like browser.html is good here.

paul1149

@mib2berlin No, I don't believe there's a .css associated with this mod. I place all my custom .css files in a dedicated folder in the user profile.

Here's the thread in question: https://forum.vivaldi.net/topic/35443/backup-search-engines/2?_=1678846894321

mib2berlin

@paul1149
Please read my edit, I have no knowlegde about this mod.
I am not sure this is still working in the latest Vivaldi version.

Modding Vivaldi

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