Author Topic: Ability to change CSS styling for "unread"?  (Read 6733 times)

Offline andrewnewby

  • Newbie
  • *
  • Posts: 5
Ability to change CSS styling for "unread"?
« on: January 03, 2023, 02:28:50 AM »
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


Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Ability to change CSS styling for "unread"?
« Reply #1 on: January 03, 2023, 12:57:27 PM »
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]
.messagelist tr.unread  {
  background-color: red;
}

Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and moreā€¦

Offline andrewnewby

  • Newbie
  • *
  • Posts: 5
Re: Ability to change CSS styling for "unread"?
« Reply #2 on: January 04, 2023, 01:40:43 AM »
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";

Line 458 is:

@import (optional) "_styles";

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

Cheers

Andy

Offline andrewnewby

  • Newbie
  • *
  • Posts: 5
Re: Ability to change CSS styling for "unread"?
« Reply #3 on: January 04, 2023, 01:52:17 AM »
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]
apt install node-less
But I gues thats an older version. I found this:

https://lesscss.org/

So run:

Code: [Select]
npm install -g less
and it compiles fine now :) The background color works perfectly too - thanks!

Cheers

Andy