Modding Vivaldi

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.

paul1149

@mib2berlin Yes, you're right. It's time to switch over to the other thread. Thanks again.

luetage

@paul1149 The mod still works, I exported my engines a few days ago. Open devtools to look for errors, or try to get any other JS mod running for a sanity check.

paul1149

@luetage Thanks. I've used the database method now, but I'll keep this in mind for future use. I thought maybe my permissions on the .js file were wrong, but they check out ok.

luetage

@paul1149 It’s very likely you would have the issue with any mod. There are a few points of failure people run into regularly:

pasting the entry into browser.html at the wrong position or introducing some other error in the html
naming differences between entry and file
not completely copying over the contents of the mod (which would result in a visible error in devtools)
forgetting to restart after applying the mod
forgetting to reapply the mod after an update

paul1149

@luetage Thanks again. I thought I had those bases covered, but IAC it's done now. Be well.

Sparrows

Within the custom.css file; which style modifies the actual tab size and font ?

barbudo2005

@Sparrows

This my code for the active tab:

.tab-position     [id*= "tab"].tab.active
 
 {font-family:  Times New Roman !important; 
color: navy !important;
font-size: 14px !important;
font-weight: bold !important;
text-transform: uppercase !important;
min-width: 302px  !important;
max-width: 302px !important;
margin-left: 2px !important;
margin-right: 2px !important;
margin-top: 0px !important;
margin-bottom: 2px !important; 
background-color:  #8a8a8a !important;
border: 2px var(--colorAccentBgDarker) solid !important;
padding-left:2px !important;
filter: brightness(1.0) contrast(1.0) !important;}

Modding Vivaldi

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