Color Email Label Background
-
I don't remember who created this mod.... maybe @Haddad19 ....... sorry for not remembering. I appreciated the time & effort. It was meant to add Coloured Subject Titles for Email Label. It doesn't. What it does do flawlessly is to assign colors to the "text" of the item rather than creating a background color for the label(s) themselves. What I'm looking for is what the current default labels look -- Important = red, Personal = green, etc.
/* Coloured Subject Titles for Email Labels */
#mail_view div.tree-item:has(li[title='PENDING_BUG']) { color:red; }
#mail_view div.tree-item:has(li[title='PENDING_DELIVERY']) { color:yellow; }
#mail_view div.tree-item:has(li[title='SCHEDULED_PAYMENT']) { color:green; }
#mail_view div.tree-item:has(li[title='READ_THIS']) { color:violet; }
#mail_view div.tree-item:has(li[title='BLOG']) { color:red; }
#mail_view div.tree-item:has(li[title='WISHLIST']) { color:pink; }
#mail_view div.tree-item:has(li[title='FINANCIAL_FOLOUP']) { color:green; }
#mail_view div.tree-item:has(li[title='COMPLETED']) { color:gray; }
#mail_view div.tree-item:has(li[title='WTF']) { color:red; } -
@janrif said in Color Label Background:
It was meant to add Coloured Subject Titles for Email Label. It doesn't.
It does exactly what it says on the tin:
Coloured Subject Titles for Email Labels
It changes the Subject titles. So either you misunderstood what it did or someone was overselling itAnyway, this should do it:
.MailLabels-Label[data-label='Important'] {color: white; background-color: blue;} .MailLabels-Label[data-label='Work'] {color: white; background-color: green;} .MailLabels-Label[data-label='Personal'] {color: white; background-color: purple;} .MailLabels-Label[data-label='To Do'] {color: black; background-color: yellow;} .MailLabels-Label[data-label='Later'] {color: black; background-color: burlywood;}
Adjust/add/modify as necessary.
-
@Pathduck said in Color Label Background:
Anyway, this should do it:
.MailLabels-Label[data-label='Important'] {color: white; background-color: blue;}
.MailLabels-Label[data-label='Work'] {color: white; background-color: green;}
.MailLabels-Label[data-label='Personal'] {color: white; background-color: purple;}
.MailLabels-Label[data-label='To Do'] {color: black; background-color: yellow;}
.MailLabels-Label[data-label='Later'] {color: black; background-color: burlywood;}@Pathduck Beautiful! Works as advertised on the tin. But I've got to ask, where did you come up with color named "burlywood"? Never heard of it before. What colors are acceptable for this kind of application? TIA
-
Said:
What colors are acceptable for this kind of application?
Look this link:
-
@barbudo2005 Just what I was looking for! Thanks so much.
-
I still have the TripleColors from good old Opera by TJ Luoma as a webpanel for quick reference
https://pathduck.github.io/vivaldi/panels/triplecolors.html
It has all the HTML4 colours I think.
https://www.w3.org/TR/css-color-3/#html4 -
@Pathduck said in Color Label Background:
I still have the TripleColors from good old Opera by TJ Luoma as a webpanel for quick reference
Wow... Now I can go crazy.
But... I have another question. I know where css files need to live in Vivaldi but, let's say, I want to add color to the Vivaldi Calendar, would those modifications live in the same place and how I identify them as calendar colors vs label colors (aqctually two questions). TIA
-
@janrif
"Add TripleColors to your Opera Panels or Add TripleColors to Netscape / Mozilla sidebars"Ah the Good Old Days
I know where css files need to live in Vivaldi but, let's say, I want to add color to the Vivaldi Calendar, would those modifications live in the same place and how I identify them as calendar colors vs label colors (aqctually two questions). TIA
Yes, the same folder.
How you organize things there is up to you.
I like to break mods that belong together and modify the same UI into their own files.
Then I keep a genericcustom.css
for smaller changes like hiding buttons etc.I always add comments to CSS code - especially if you borrow other people's code it's very important to have a way to know where you got it (author/forum url).
These are the ones I currently use:
https://pathduck.github.io/vivaldi/mods/CSS/ -
@Pathduck said in Color Label Background:
Yes, the same folder.
How you organize things there is up to you.
I like to break mods that belong together and modify the same UI into their own files.
Then I keep a generic custom.css for smaller changes like hiding buttons etc.I always add comments to CSS code - especially if you borrow other people's code it's very important to have a way to know where you got it (author/forum url).
These are the ones I currently use:
https://pathduck.github.io/vivaldi/mods/CSS/...... TKS. so looking at the css instruction pages as well as yours, can I assume that were I to want to change calendar colors some more, I might start that line w something like /*calendar colors */ then select various calendar names, i.e. "bills", "family" and mod them w their own color? I'm trying to get a handle on this css stuff.....
-
@janrif said in Color Label Background:
...... TKS. so looking at the css instruction pages as well as yours, can I assume that were I to want to change calendar colors some more, I might start that line w something like /*calendar colors */ then select various calendar names, i.e. "bills", "family" and mod them w their own color? I'm trying to get a handle on this css stuff.....
Yes, I recommend adding comments to code you write for reference. And when adding code made by others, add their forum name and a url to the topic where you got it.
But make sure you understand CSS comments properly. If you get them wrong, your code will break. So read:
https://www.w3schools.com/css/css_comments.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CommentsBut this code I gave was for Email Labels - it has nothing to do with Calendars. And calendars can already have their colours changed in the settings, so not sure what you're getting at here?
I recommend you make another topic relating to calendar colours.
You already got the code needed earlier I believe?
https://forum.vivaldi.net/topic/72905/clearly-visible-calendar-events -
@Pathduck said in Color Label Background:
But this code I gave was for Email Labels - it has nothing to do with Calendars. And calendars can already have their colours changed in the settings, so not sure what you're getting at here?
@Pathduck What puzzles me is that a hex color assignment for a label background is vibrant in the label but very muted in calendar; either in a light theme or a darker theme.
-
@janrif Please share the code you're using for this. Impossible to know otherwise.
And make a screenshot of this "muted" vs "vibrant" difference.
And again, you should open a new topic about Calendar event colours, this is about Mail Labels...