How to change the font color of the active tab

scw1611

nomadic

@scw1611 Again, I really recommend learning some css and how to inspect the UI if you are going to modify the browser extensively.

This is a really quick mod if you inspect the active tab. By going up the HTML hierarchy, you can eventually find what is controlling the text color.

* The css property that controls text color is simply called color. You can look at this site for some good css info: https://www.w3schools.com/css/css_text.asp

Looking at the tab's HTML structure, you can see that the part of the tab that contains the text is in a span with a class called title. We can use this to more specifically target the element we want to change the text color off.

So using the selector we found in the first image:

#browser .tab-position .tab.active

And the additional specificity we found in the second image:

.title

We can make a selector that will allow us to style the text of the active tab:

#browser .tab-position .tab.active .title

* You can learn more about making css selectors here: https://css-tricks.com/multiple-class-id-selectors/

Then finally, we can set a new color to red for example.

color: red;

Final Result:

With a little practice, you can make this mod in under a minute. It is much simpler than going to the forum to ask for help making every small change. There will of course be times when you can't figure something out, and the forum will be there with help.

I am not including the complete compiled css style because I would like you to read rather than just copying the style. Hopefully you can figure it out.

Structure:

css_selector {
    style_property: style_value;
}

barbudo2005

@scw1611 This is a list of the most used style_property: style_value :

font-family: Verdana !important;
font-style: normal !important;
font-style: italic !important;
font-variant: normal !important;
text-decoration: underline !important ;
text-decoration-color: navy !important;
font-weight: bold ! important;
font-size: 11px !important; 
text-transform: uppercase!important ;
text-rendering: optimizelegibility !important;



 
line-height: 10px!important;
line-height: 120% !important;

text-align: justify ! important;
white-space: nowrap ! important;
vertical-align: middle !important;



max-height: 20px !important;
min-height: 20px !important;
  
line-height: 25px !important;
line-height: 90% !important;

padding-top: 0px !important;
padding-bottom: 0px !important;
padding-right: 15px !important;
padding-left: 15px !important;
border: none !important;


max-width: 10px !important;
margin: -3px 0px  -5px 0px !important; 
vertical-align: middle !important;
margin-right: 5px !important;

display:none !important;

position:absolute !important;
position:static !important;
font-style: italic !important;
font-size: 11px !important; 
transform: scale(2.5)   !important;
transform-origin:100% 0   !important;

background-image: none !important;
background-color: #E3EEFB ! important;
background-repeat: no-repeat !important;
background-size: cover !important;
height: 100% !important;

scw1611

@nomadic thank you!

Buglocker

@nomadic What's the final code ?
Could we change the size and/or the type of the font ?

nomadic

@Buglocker Haha, funny that you should reply to this post. The same lesson I was trying to teach before would also be good for you to learn.

From a previous screenshot of yours, I am guessing English isn't your primary language, but hopefully you can understand. Feel free to ask me any questions about parts you don't understand.

If you want to heavily modify Vivaldi, it really is recommended to learn some of the basics of CSS.

Inspecting the UI has gotten a bit harder with recent updates, but this thread has updated info on how to do it. This is the method I normally use:

Open vivaldi://settings/ in a tab and load devtools with a keyboard shortcut, quick commands, or menu entry (e.g. Main Menu — Tools — Developer Tools).

As for the font and size, this is a good resource:

Family - https://www.w3schools.com/css/css_font.asp
Size - https://www.w3schools.com/css/css_font_size.asp
Style - https://www.w3schools.com/css/css_font_style.asp

Buglocker

@nomadic I use Vivaldi the last 6 days. I learned something about .css. These aren't mine, but I use them and they work properly. Some of them I've made changes to :
Καταγραφή.JPG
So , there is not code for changing size/color/type of the Tab font. :face_with_cold_sweat:

nomadic

@Buglocker

So , there is not code for changing size/color/type of the Tab font.

There is, I just provided the recipe for how to create it rather than providing the completed dish. It is a good simple mod you can try creating for yourself.

I prefer to have a forum filled with people who can make fantastic modifications to Vivaldi that I can use on my own install rather than just a few modders that create the majority of the mods.

The more modders the merrier!

Buglocker

@nomadic
No school , no code , no problem !!!! :smiling_face_with_open_mouth_cold_sweat:
I'm too old to start being a modder.
I'll wait for Vivaldi to get better.

nomadic

@Buglocker said in How to change the font color of the active tab:

I'm too old to start being a modder.

Nonsense, you are at least young enough at heart to tinker with some mods. I know plenty of older folk who wouldn't even try to mod a browser, let alone know that Vivaldi is a browser.

But I will help this time...

#browser .tab-position .tab.active .title {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;  /* change the font used */
  font-size: 15px;  /* increase the size */
  font-weight: 700; /* bold text */
  color: red;     /* text color */
}

You probably won't want those exact values, so maybe I forced you to do a bit more tinkering

I might delete the CSS in a few days to not detract from the message of this thread.

Buglocker

@nomadic Yep it works . Now that we've found a code that works, don't take it off. God knows how many hundreds of people will be looking for these changes.
The font of the active tab is one type. Why the code has 5 ? Which one must change ?
And one last question : what is the corresponding code for inactive tabs ?

Thanks.

nomadic

@Buglocker

The font of the active tab is one type. Why the code has 5 ? Which one must change ?

I am not an expert on CSS font families. I always either search up one online or, in this case, choose one that my code editor, VScode, suggested to me.

They work in a fallback system because not everyone has the same fonts installed on their computers. Here is an excerpt from the W3 Schools link I provided earlier:

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.

If you know that you have a specific font installed, you probably don't need to worry about providing fallbacks.

And one last question : what is the corresponding code for inactive tabs ?

You can use :not() to exclude a selector. Like so:

#browser .tab-position .tab:not(.active) .title {
   /* ... */
}

Buglocker

@nomadic Got it . It works and it is :

/* Change color , type and size of inactive Tabs /
#browser .tab-position .tab:not(.active) .title {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; / change the font used /
font-size: 15px; / increase the size /
font-weight: 700; / bold text /
color: red; / text color */
}
Why when i put a color e.g. color: #cc612 it not works ? What is the mistake at syntax ?
And what about the 4 fonts instead of 1 ?

nomadic

@Buglocker When you post CSS or code, you should use the Code (</>) button in the forum post options along the top of the text input.

It will give you this structure:
```
Code Here
```

Where you replace the "Code Here" with CSS/code.

color: #cc612

That isn't a valid HEX code. They are either 3 digits in shorthand or 6 digits (you can also include the alpha channel [transparency] with 8 digits).

So this would work:

color: #ccc612;

Buglocker

@nomadic I understand whats wrong. For a light green color i had an RGB (at MS' paint) 12 , 198 , 18.
At the convert to HEX , i put c > 12 , c6 > 198 and 12 > 18. The first wants a zero to appear with 2 digit and to make the code six digits (#c0c612)
I think we cover all about the tab fonts with that , except the font type.
Thanks.