Unread tab indicator - how to change color?
-
question in topic name. tried searching, found no obvious way, though understood people use some css for that. If smb did that, please share a way to customize color or better to take "accent"/"highlight" color of current theme in use.
p.s. initially I'd wish Vivaldi could incorporate way to edit that along with theme colors edit, but I doubt it can happen./ -
@reyn
.tab.unread .tab-header {background-color: red;}
Be aware that using a normal color will only work on one (a few) themes and will likely make unread tabs in other themes unreadable. Either change the text color too, or use Vivaldi's color variables. Eg:.tab.unread .tab-header {color: var(--colorHighlightBg);}
. -
@luetage thanks for a tip. sorry, can you please give me link on how to use this? i'm not really familiar with css, so don't know where exactly to put the file and if this one line if everything needed..?
yet you're right, i think same variables are better than strict set color = --colorHighlightBg stands for "highlight" in theme edits, what variable stands for "accent", --colorAccentBg? -
@reyn Thankfully doing the css stuff doesn't require any magic rituals you do pretty well when following the guide by Christoph142
https://forum.vivaldi.net/topic/10549/modding-vivaldi
In case you'll need to find it again it is pinned in the modification section of the forum -
@zaibon did as described there but no effect...
- created "unread tab indicator.css" in "resources\vivaldi\style" with
.tab.unread .tab-header {color: var(--colorHighlightBg);}
- edited "resources\vivaldi\browser.html" and added
<link rel="stylesheet" href="style/unread tab indicator.css" /> - restarted browser, nothing.
-
@reyn Save without spaces in the file name and try again. It's best practice, but don't know, if that's your issue. What's important about modifying Vivaldi is inspecting the UI – read here: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
-
@luetage with no spaces it kinda worked, but not really did what i wanted.
it seems the text of unread tab received highlight(blue) color, while my target is that small sign at right top corner. what should i change in css? -
@reyn
.tab-position .tab.unread { background-image: linear-gradient(-135deg, var(--colorHighlightBg) 5px, transparent 5px) !important; }
Inspect the UI yourself, I gave you the link. This can all be found out with a little investigation. If you want another color, look at the inspector too. The color variables are listed in the css part.
-
my problem is solved, thanks for providing last code-line.
the inspect tool doesn't help much as one needs to know css real good to understand all these parameters. i clicked trough whole tab bar and found no line mentioning smt about this background-image: linear-gradient. so it's like inspecting black room for black cat, that maybe is not even there.
-