CSS & UI ¿?

[isotope217]

I have a couple questions.

Hello. I'm new around here and I had a few questions.

I'm coming off of 20 something years with Firefox, and though I've dabbled with other browsers, Vivaldi looks to be something finally worth switching to. I had a few questions, though, maybe someone can help me.

1. My first question is about site CSS. In firefox I was able to do per-site/domain font specification like so:

@-moz-document domain(stackexchange.com) {
    * {
    font-family:
    "socialico plus",
    ikoo,
    Arial,
    Helvetica,
    sans-serif !important;
}

Is that possible with vivaldi? If so, how would I do this in my custom css file?

2. My second question is about the UI. The program font itself can sometimes look quite illegible (see here):
   Is there a way to make the entire program's UI a specific font, or make it match the tab/file menu font? If so, how?

3. The search function as of now is a drop down pop out. I was wondering if I could attach it to the bar so it's always present?

4. Is it possible to move the extension icon (of choice) above the url bar, say in-line with the file menu to the far right? Like so:
   

The last 2 are just quality of life stuff, but the first 2 are pretty much deal breakers due to my eyes. Thank you for any info, I appreciate it and hope this can finally be my new home.

--
ModEdit: Title

[lfisk]

@isotope217 Seems like you want to do above average tweaking right away

Take a look here for starters:

Modifications

[Pathduck]

1. Custom CSS can only change Vivaldi's UI, not how webpages render fonts. You'll have to use a userscript and add it through a userscript manager for instance TamperMonkey or others to change website fonts.

2. That looks terrible. Have you turned off ClearType in Windows?
   https://learn.microsoft.com/en-us/typography/cleartype/
   https://www.tenforums.com/tutorials/80598-turn-off-cleartype-windows-10-a.html

3. You'll have to explain this better. I have no idea what you mean by "attach it to the bar".

4. Extension icons always live in the extensions bar, there's no way to move individual icons. You can move the whole bar to either the Panel Bar or the Status Bar.
   https://help.vivaldi.com/desktop/appearance-customization/edit-toolbars/#Customize_toolbars

[barbudo2005]

@isotope217

Said:

In firefox I was able to do per-site/domain font specification like so…

Install the extension Stylus Beta (MV3):

https://chromewebstore.google.com/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo

And use this code:

*:not(pre, pre *, code, [aria-hidden="true"] , [class*="ico"], [class*="fa"], .icofont, [style*="font-"], [class*="icon"], [class*="Icon"],[class*="symbol"], [class*="Symbol"], .glyphicon, [class*="material-symbol"], [class*="material-icon"], mu, [class*="mu-"], .typcn, [class*="vjs-"], [class*="control"] *, [class*="button"], [role*="button"], [type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"],
[class*="bb"], [class="ll"], i, [class="i"], [class*="badge"], [class*="symbol"],  img, svg)

{font-family: Lato  !important;
text-align: justify;
line-height: 1.35;
letter-spacing: 0.015rem !important;}

And this setting:

Said:

Is there a way to make the entire program's UI a specific font..

Use this code in custom.css

/* UI FONT */

#browser.win:lang(en),
#browser.win + div:lang(en),
#browser.win + div + div:lang(en),
#browser.win button:lang(en),
#browser.win input:lang(en),
#browser.win select:lang(en),
#browser.win textarea:lang(en)

{font-family: Lato !important;
font-size: 18px;}

[Pathduck]

@barbudo2005 Nice codes

Just a minor question?

#browser.win:lang(en),

Doesn't this assume the browser has the UI set to English language? Seems kind of hit-and-miss depending if Blink is able to determine the language of the element?
https://developer.mozilla.org/en-US/docs/Web/CSS/:lang

IMO the user should focus on figuring out whatever is causing that horrible UI font-rendering instead of trying to change the UI font. I suspect disabling ClearType is causing that.

[barbudo2005]

@Pathduck

Said:

Doesn't this assume the browser has the UI set to English language?

Yes, of course.

Everyone must change the code with their language.

Said:

Seems kind of hit-and-miss depending if Blink is able to determine the language of the element?

It works perfectly for me.

Said:

IMO the user should focus on figuring out whatever is causing that horrible UI font-rendering instead of trying to change the UI font.

Of course, after seeing what you suggest.

There are fonts that are easier to read than others.

[barbudo2005]

@isotope217

If you just use “*” this is what happens:

This:

Instead of this:

[isotope217]

@Pathduck said in I have a couple questions.:

1. Custom CSS can only change Vivaldi's UI, not how webpages render fonts. You'll have to use a userscript and add it through a userscript manager for instance TamperMonkey or others to change website fonts.

Interesting. So it's the same as chrome in that regard, too. Okay.

2. That looks terrible. Have you turned off ClearType in Windows?
   https://learn.microsoft.com/en-us/typography/cleartype/
   https://www.tenforums.com/tutorials/80598-turn-off-cleartype-windows-10-a.html

This is intentional.

3. You'll have to explain this better. I have no idea what you mean by "attach it to the bar".

Right next to the url bar, like this:

As of right now, it is a search icon that once clicked drops down the search field. It's a bit tedious.

@barbudo2005 thanks, I'll test this. Also, about your last post, I only gave a small list of fonts I use. I cover a lot of the glyph fonts. I can post them if you'd like.

[isotope217]

I have figured out the search bar. I had "Show As Text Field" unchecked.

[dontdieych]

@barbudo2005 said in I have a couple questions.:

*:not(pre, pre *, code, [aria-hidden="true"] , [class*="ico"], [class*="fa"], .icofont, [style*="font-"], [class*="icon"], [class*="Icon"],[class*="symbol"], [class*="Symbol"], .glyphicon, [class*="material-symbol"], [class*="material-icon"], mu, [class*="mu-"], .typcn, [class*="vjs-"], [class*="control"] *, [class*="button"], [role*="button"], [type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"], [class*="bb"], [class="ll"], i, [class="i"], [class*="badge"], [class*="symbol"],  img, svg)

Very much complete than mine. Thanks.