Customize Roundcube theme per user (logo)

Hi,
is it somehow possible to extend the standard Roundcube theme with a custom login logo per user? Are there config files per user? I searched for them, but didn’t find them. Perhaps can be added?
Best, Michael

No, there are currently no special config files for each domain and it not possible with out changes to the core systems.

Also it not planned as a feature…

Hi eris, thanks for the fast answer. In spite of that I hope there will be a config possibility for each Hestia user in the future. :slight_smile:
This would ease corporate design and more. Otherwise Roundcube has to be installed and maintained as seperate app for each user if a specific logo is desired.

Btw. just moving sites from cPanel and exploring the possibilities. Hestia does a really great job so far.

Best, mandrael

Hestia is fully opensource. So feel free to submit a pull request with the needed changes.

@mandrael another option is to just use the Rainloop webmail which gives a very generic login banner and in my opinion a much better webmail client than roundcube

Thanks, but the project rainloop seems quite dead according to its github folder: GitHub - RainLoop/rainloop-webmail: Simple, modern & fast web-based email client
And somewhere it’s already proposed to replace RainLoop with SnappyMail. I had a look on both and like RoundCube better, it’s standard everywhere and in active development.

Here it is: [Feature] [Bug] Replace Rainloop Webmail with Rainloop fork Snappymail · Issue #2620 · hestiacp/hestiacp · GitHub

If you want to add an custom log to Roundcube:

Addd to /etc/roundcube/config.inc.php

/*
   [
     // show the image /images/logo_login_small.png for the Login screen in the Elastic skin on small screens
     "elastic:login[small]" => "/images/logo_login_small.png",
     // show the image /images/logo_login.png for the Login screen in the Elastic skin
     "elastic:login" => "/images/logo_login.png",
     // show the image /images/logo_small.png in the Elastic skin
     "elastic:*[small]" => "/images/logo_small.png",
     // show the image /images/larry.png in the Larry skin
     "larry:*" => "/images/larry.png",
     // show the image /images/logo_login.png on the login template in all skins
     "login" => "/images/logo_login.png",
     // show the image /images/logo_print.png for all print type logos in all skins
     "[print]" => "/images/logo_print.png",
   ];
*/
$config['skin_logo'] = null;

And make sure you use a relative path from /var/lib/roundcube/

Or use a valid url

3 Likes

Awesome Thanks @eris

Thanks :slight_smile:
I noticed that the logo has a specific URL:

Login-logo and top-left logo, also the big logo on the right:
https://webmail.MYDOMAIN.TLD/skins/elastic/images/logo.svg

Is it possible to make a redirect or a symbolic link?
Then the issue is completely solved.

Best, mandrael

I have no idea… Mail runs in one static folder in /var/lib/roundcube/ under a different user then the users it self…

An old thread but might perhaps be useful:

https://www.roundcubeforum.net/index.php/topic,10292.msg41017.html#msg41017

1 Like

Thanks chris, yes I also tried with Virtualhosts, but in another way. I tried to replace the logofile itself via RewriteRule, but didn’t succeed yet. I’ll try to do the variant you linked and will post here how it worked :slight_smile:

You’re welcome. I’m sure that more users are curious to read about your findings.

Hi,
it’s solved now:

  1. add this line to /var/lib/roundcube/config/config.inc.php before the closing “?>”:
// include individual domain configs
$config['include_host_config'] = true;
  1. add a file for each individual domain in /var/lib/roundcube/config:
nano webmail.DOMAIN.TLD.inc.php

(replace DOMAIN.TLD with the desired domain)

Content of the domain config file to change the logo:

<?php
$rcmail_config['skin_logo'] = 'https://www.domain.tld/yourlogo.png'
$config['product_name'] = 'Your Login Title Text';
$config['blankpage_url'] = 'https://DOMAIN.TLD/watermark.html';
?>

blankpage_url customizes the watermark/background on the right.

Example watermark.html for elastic:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
  background: url(https://www.DOMAIN.TLD/yourwatermark.html) center no-repeat #fff;
  background-size: 30%;
  background-blend-mode: luminosity;
}
html:not(.dark-mode) body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .85);
}
html.dark-mode > body {
  background-color: #21292c;
  background-blend-mode: soft-light;
}
</style>
<script>
  try {
    if (document.cookie.indexOf('colorMode=dark') > -1
      || (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      document.documentElement.className += ' dark-mode';
    }
  } catch (e) { }
</script>
</head>
<body></body>
</html>

I tested it and it worked :+1:
Best, mandrael

4 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.