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’

Overall, it’s great, however one comment I got quite a lot was that the formatting of unread messages in the message list was a little confusing. As you can see, by default it has subject in bold and the sender above in slightly smaller text:

Many people – including myself – had a tendency to see the line the wrong way around, with the subject as the first title line and the sender as the second line below. Obviously, this is in fact combining content from two separate emails so it was quite easy to select the wrong email by mistake!

Easy To Change

Fortunately, changing this was quite easy with the new LESS based CSS so I made some small changes:

As you can see, now unread mails have the sender in bold and the subject below in slightly smaller text.

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.

.messagelist .message .subject {
        font-size:0.9rem;
}
.messagelist .message.unread .subject {
        font-weight:normal !important;
}
.messagelist .message .adr {
        font-size:1rem;
        color:black;
}
.messagelist .message.unread .adr {
        font-weight:bold;
}

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 Selected Item Highlight Colour

Need Any Help?

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

Feedback

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 Message List Layout

5 thoughts on “Roundcube Elastic Skin – Changing The Message List Layout

  • 15th March 2020 at 3:59 am
    Permalink

    For me also, this is an improvement. Thank you.

    Reply
  • 19th May 2020 at 4:27 am
    Permalink

    Thanks for this! It seems like another change that would help this is if we could make the line that separates each message in the inbox slightly darker and/or bigger. Do you know how you would make this change?

    Reply
    • 29th May 2020 at 8:30 pm
      Permalink

      Hi George, yes, you can just add something like the following to the _styles.css file, setting your preferred width and colour.


      .listing tbody td, .listing li a {
      border-bottom: 2px solid grey;
      }

      This will change the separator for both the inbox list of emails and the list of folders. To only change the separator for the list of mails, remove the ‘.listing li a’ selector, and vice versa to only change things for the list of folders.

      Hope this helps!

      Reply
  • 9th June 2020 at 3:21 pm
    Permalink

    This is awesome! Thanks!

    Reply

Leave a Reply

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