Release Support > Release Discussion
Ability to change CSS styling for "unread"?
(1/1)
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: ---.messagelist tr.unread {
background-color: red;
}
--- End code ---
andrewnewby:
Thank you. Trying that, I can't seem to get it to recompile:
--- Quote ---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";
--- End quote ---
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: ---apt install node-less
--- End code ---
But I gues thats an older version. I found this:
https://lesscss.org/
So run:
--- Code: ---npm install -g less
--- End code ---
and it compiles fine now :) The background color works perfectly too - thanks!
Cheers
Andy
Navigation
[0] Message Index
Go to full version