Color a Single Tab (or Tab Group)

risingStark

@dude99 Atleast someone is hearing us and implementing the feature requests

No offence to Vivaldi team and I know they are working super hard to incorporate every feature request and make it the best and most customizable browser. I am just waiting for 1-2 major versions down the line. Like maybe Vivaldi 6.0 would have most of the major and most sought after feature requests implemented hopefully.

algebraic

Wow, some of the nice features are requested so long ago... Please, team Vivaldi, make this simple thing. Just a manual color for a tab, it would be extremely useful.

AnnettRothstein

Yes, please. I love Vivaldi and don't want to switch back to Chrome, but I use Edge on my Surface and it's so much better:

I can read the name of the group/tab stack even when it's closed. In Vivaldi, I can only see the name when the tab stack is open.
Color coded groups are just easier to see. This is not even up for debate.

petertown

I love Vivaldi.
I own two restaurants. A construction company. I am physically building my own house. I am a single parent. And I'm continuing to take on more projects. And I'm loving every single day of it. And Vivaldi has seriously helped me increase my productivity.

But, when I'm in my internet browser, I get so lost at times with all these projects. And, that is my fault. I acknowledge that much. I get how sessions work. But, sometimes I feel like I really need those 50 tabs close by.

And, I like to be able to follow my tangents through my tabs.

I don't see why we are not yet able to do any of the following:

Name our Tab-Stacks
Color-code our tabs/tab-stacks
Create new tab-stacks from second layer tabs

If this isn't feasible, then have any of you felt the same way and how did you handle it?

Thanks everyone.
Your friendly home-building, people-feeding, uneducated expert of things,
MrAtlantic.

PS. I haven't posted on a forum in nearly 8 years... So, please take this as a huuge gesture of love because I think this browser, and likewise it's community, is freaking great

luetage

@petertown We can already rename tab stacks. I do not use stacks myself regularly, I’m more in favor of sessions, but when I do I use two level stacking. Even if you don’t like sessions, it’s important you save your current session from time to time anyway, since it’s not guaranteed Vivaldi will be able to restore your last session all the time. The forum has many topics about people losing hundreds of tabs because their last session didn’t restore. Auto‐saving sessions isn’t implemented, but you can use a modification for that ☛ https://forum.vivaldi.net/topic/33047/autosave-sessions-mod

Pesala

Several similar topics were merged.

Pesala

@petertown said in Color coded tabs:

Create new tab-stacks from second layer tabs

Select them and move them to a new window.

OrchestraBrowser2021

@petertown I understand, I hate it when another browser has a feature that Vivaldi doesn't (for example chrome, edge, and brave having color-coded tab groups) but there are some other things that you can do to manage tabs such as using extensions like

Toby to save tabs into collections. this can give you easier on the eyes access to websites and can be a great alternative to bookmarks AND sessions
Workona to group tabs into even bigger categories. a nice (but possibly bulky) alternative to tab stacks in tab stacks
And even more extensions. I remember an older extension that let you rename tabs and change their icon in chromium browsers called Tab modifier by syl

[edit] didn't realize there was a way to color tabs.

barbudo2005

@petertown

1.- COLOR TAB

You can define any format of the tab by using some part of the title of the tab.

Use this code:

.tab[title*="Vivaldi Forum"]:not(.active)

{color: #85adf1 !important;
font-weight: bold ! important;}

2.- COLOR TAB STACKS

Different border color for stack N° 1, N° 2, N° 3, N° 4, etc.

Use this code:

/* For me the tabs in the first level have "--PositionX"  with a multiple of 180*/

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:62px"]  >  .tab:not(.active)

{border: 2px rgba(59, 129, 230, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:242px"]   >  .tab:not(.active)

{border: 2px rgba(130, 0, 4, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:422px"]   >  .tab:not(.active)

{border: 2px rgba(0, 140, 137, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:602px"]   >  .tab:not(.active)

{border: 2px rgba(255, 99, 29, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:782px"]   >  .tab:not(.active)

{border: 2px rgba(233, 187, 54, 0.6) solid !important;}

Leothwyn

I'm new to Vivaldi, and came here looking for info on how to change the color of different stacks. I'll try the CSS for now, but would love to see this as a built in option, like the chrome groups.

Quercius

I just saw how Edge implemented this feature and I think it's elegant and easy to use. I'd be really happy to see something similar (or exactly) like this... I know, devs are working hard and I'm not complaining or what, just wondering if in the future this could be implemented among the other useful stuff they had already added...

luetage

@quercius I feel straight up copying a feature that has been copied from Vivaldi is not a viable option. Moreover it would get really messy with themes, position of tabs, accents and transparency. In my personal opinion the whole stacking thing is a one way street and not forward‐thinking. But I guess that’s not a good topic to mention this in lol

dude99

@luetage Is that your polite way of saying the tab stacking is undercooked? LOL

IMHO the tab bar system need revamp completely with stacking in mind. As of now it feel like they are using workaround to get the stacking effect added on top of the original tab bar system. This is my proposed solution: https://forum.vivaldi.net/post/553215

As for coloring stacked tab, it's shouldn't be much of a problem with theme or transparency, because we can simply treat 'em like renaming stack tab - once user marked a stack with specific color, then excluded it from theme & transparency. Also, Vivaldi can use other method to color a stack, like color outlined the entire stack, or a bottom/top stroke to "group" the stack, or create an indent color like unread marker...etc.

To be honest, currently some theme (example: default Dark) do make it kinda difficult to separate stacked tab from solo tab. I have to constantly spot the # of tab label to pick out stacked tab from solo tab. Thus, the current theme color system ain't really good for stacking, colorized stack tab can resolve this problem for better accessibility.

barbudo2005

With this code you can define the color of the stack by part of the title of the stack (the host):

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="Vivaldi Forum"]

{border: 2.5px rgba(59, 129, 230, 0.7) solid !important;}

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="IMDb"]

{border: 2.5px rgba(226, 185, 37, 0.7) solid !important;}

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="YouTube"]

{border: 2.5px rgba(230, 32, 32, 0.7) solid !important;}

dude99

@barbudo2005 Nice one!

now if we can use js to fetch the accent color of each domain stack (just like active tab) & apply it as auto colorized for each stack then it would be perfect. LOL

barbudo2005

@dude99

The problem of that code is that not all sites have their "domain name" in the title.

So I tried this code:


.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
 .tab-header  .favicon  img[srcset*="vivaldi.net"]

{border: 2.5px rgba(59, 129, 230, 0.7) solid !important;}

 
.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
.tab-header  .favicon  img[srcset*="blogspot.com"]

{border: 2.5px rgba(234, 105,19, 0.7) solid !important;}


.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
.tab-header  .favicon  img[srcset*="youtube.com"]

{border: 2.5px rgba(230, 32, 32, 0.7) solid !important;}

It works:

So since you can't control "parent selector" with its "children selector" with CSS, then maybe a "Master of the Universe user" in JS could do it.

It would be awesome to be able to use the domain. Please do it.

barbudo2005

@dude99

With the upgrade Chromium to 102.0.5005.55 appeared the pseudo-class :has() which allows you to choose a parent by descendants. (Thanks @kichrot for note it)

So now you can highlight a tab stack by the color of the favicon of the domain(host):

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="vivaldi.net"] )

{border: 2.5px rgba(88, 115, 211, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="vivaldi.net"] ) .stack-counter
 
{color: rgba(88, 115, 211, 1) !important;}


.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="blogspot.com"] )

{border: 2.5px rgba(213, 115, 50, 1) solid !important;}
 
.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="blogspot.com"] )  .stack-counter
 
 {color: rgba(213, 115, 50, 1) !important;}
 
   
 .tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="youtube.com"] ) 

{border: 2.5px rgba(230, 32, 32, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="youtube.com"] ) .stack-counter
 
 {color: rgba(230, 32, 32, 1) !important;}

Enjoy.

luetage

@barbudo2005 Damn, it finally dropped. We’ve been waiting years on this. This is worthless when being in charge of your own project, but very helpful when messing with code we don’t have access to.

Seasonly

@barbudo2005

Great job ! I'm discovering this. This is boring that is not native ! and not totally automatic ! It could help a lot to distinguish quickly a tab between a lot of them or simply between tab line

barbudo2005

@Seasonly

Said:

This is boring that is not native ! and not totally automatic !

It could be AUTOMATIC with ACTIVE tab stack very easily!!!!!!!!

Vivaldi has built-in a script to determine the color most used in the favicon when you put on this setting:

The problem is that I don't want this accent color in the bars :

So I revert to my colors with this code:

.mainbar,
 .toolbar,
.bookmark-bar,
.observer,
.toolbar-extensions,
#main.left,
.bookmark-bar-top,
.color-behind-tabs-off .bookmark-bar,
.color-behind-tabs-off .bookmark-bar button

{background-color: #414141  !important;}

/*Some selectors may be in excess*/

So now the AUTOMATIC code is :

.tab-position.is-substack  [id*= "tab"].tab

{border: 2.5px var(--colorAccentBg) solid !important;}

You can use any of this colors:

Enjoy

Color a Single Tab (or Tab Group)

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

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