A few days ago, I updated my Roundcube Webmail installations to the brand new version 1.4 with it’s mobile friendly ‘elastic’ skin.

The ‘Issue’

In a previous post, I showed how to change the message list layout. In this post, after using the new version for a little longer, I will show how to change the colour of the highlighted item(s) in this list as I find the default has a little too low contrast for me:

The Change

Again, changing this was quite easy with the new LESS based CSS.

As you can see, now items are highlighted in a slightly darker blue which I personally find a bit easier to see:

If you would like to do this with your Roundcube installation, all you need to do is add the code below to the _styles.less file in its skins/elastic/styles folder and recompile it.

tr.selected td
        background-color:#D6EAF8 !important;

Don’t Have LESS Installed?

Tip: If you don’t have a LESS compiler installed, you can use the quick and dirty method and just add it to the bottom of the styles.css file in the same folder instead!

See Also

If you found this useful, you may also find the below article useful:

Roundcube Elastic Skin – Changing The Message List Layout

Need Any Help?

Do you need help with this or any other project? Drop a comment below or click the Contact Me! button.


All of your feedback (good and bad!) is appreciated. Please use the comments section below or the online contact form for anything more confidential.

Roundcube Elastic Skin – Changing The Selected Item Highlight Colour

One thought on “Roundcube Elastic Skin – Changing The Selected Item Highlight Colour

  • 15th March 2020 at 3:58 am

    I like this, thanks a lot!


Leave a Reply

Your email address will not be published. Required fields are marked *