Highlighting of unread emails

[JanBab]

Hi,
I would like to change the highlighting of unread emails. I use this method:

1. Create a file custom/Espo/Custom/Resources/metadata/app/client.json with code:

   	{ "cssList": [ "client\custom\css\file.css" ] }

2. Ceate a file client\custom\css\espo-vertical-custom.css with code:

   .link {
   	color: red;
   	text-decoration: none;
   	}

Everything works, but the color has also changed for contact, organizations, etc. How can I change color only for unreaded emails?
Thanks

[eymen-elkum]

Hi,
Try this:

.list-container > .list[data-scope="Email"] strong > a {color:#0088ff}

[esforim]

Cool thread guys. I didn't like changing the CSS internal via file editing, although there no issue with it but it too much of a hassle to do. It also good that you create a Custom file so you are "upgrade safe?".

For those like me that like to do what JanBab is doing, I prefer a "local" solution, that through your Browser's addon give allow for "Userstyle" (I use Stylus on Firefox). Using the code from ayamn it should work as long as you set the URL correctly. Feel free to ask if you need help, here is the code I'm using for my Stylus (use the Import feature and update your URL)

Update: Code update after seeing post #4

@-moz-document domain("demo.espocrm.com") {
/* Change the colors of Email Text*/
.list-container > .list[data-scope="Email"] strong > a {color:#3a86ff} /* for unread normal */
.list-container > .list[data-scope="Email"] strong > a.text-warning {color:#ff006e} /* for unread important */
}

And a before and after screenshot for the curious. But it does have a weakness though, it mess up the "Important" red email highlight, not sure if it due to me using local CSS or the code need a tweak.

[eymen-elkum]

H espocrm , thanks for your note, you're right my previous code was overwrite the important color, this is the updated code:

.list-container > .list[data-scope="Email"] strong > a {color:#3a86ff} // for unread normal
.list-container > .list[data-scope="Email"] strong > a.text-warning {color:#ff006e} // for unread important

Hope you like the new colors

[esforim]

Look good, and working fine. Did a test but I'm too lazy to take a screenshot for show and tell. I see you chosen a "pinkish color", someone change the theme of the demo.espocrm.com today to Pink. I wonder if you two share some fate.