Ability to change CSS styling for "unread"?

[andrewnewby]

Hi,

I'm using the Elastic theme (in dark mode), and love it. The one bit I don't like is the "unread" messages just being in bold (see attached). Is there a way I can change it so that it maybe shows with a different background as well? I had a look at the CSS but couldn't work out what to edit to make it stick (I'm aware I can click the "unread" icon to only show unread emails - but I don't want to do that - I want to be able to clearly see the unread emails in the main list

Thanks!

Andy

[JohnDoh]

The best way to create custom CSS rules in the Elastic skin is to put them in a styles/_styles.less file in the Elastic skin folder and then recompile the CSS using the instructions in the readme.

For example add a rule like this:

Code Select Expand


.messagelist tr.unread  {
  background-color: red;
}


[andrewnewby]

Thank you. Trying that, I can't seem to get it to recompile:

root@east:/var/lib/roundcube/skins/elastic# lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
SyntaxError: expected ')' got 'o' in /var/lib/roundcube/skins/elastic/styles/styles.less on line 458, column 10:
457
458 @import (optional) "_styles";

Line 458 is:

@import (optional) "_styles";

I'm using lessc 1.6.3 (LESS Compiler) [JavaScript]

Cheers

Andy

[andrewnewby]

Ok got it. I found this issue:

https://github.com/roundcube/roundcubemail/issues/7885

Looking up, I was only 1.6.3. I installed it with:

Code Select Expand

apt install node-less

But I gues thats an older version. I found this:

https://lesscss.org/

So run:

Code Select Expand

npm install -g less

and it compiles fine now The background color works perfectly too - thanks!

Cheers

Andy