Modding Vivaldi

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.

plmach

(Sorry if platinum,) but how in version 5.3 i can add JS on browser load (particular in context/environment of UI )?

I'll linked all stuff to browser.html in /resourses/vivaldi/ (and it do tricks, if i just open it in browser already started), but do nothing when start app.

luetage

@plmach Read https://forum.vivaldi.net/post/135732, there’s a “hello, world” example for Javascript.

plmach

@luetage

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 ?

Modding Vivaldi

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