HOW TO CHANGE ROUNDCUBE WEBMAIL TITLE, CHANGE LOGO-HEADER-FOOTER

Below is a quick‑start guide you can follow to change the title, logo, header and footer of a Roundcube Webmail installation.
Everything is done by editing a few configuration files and (optionally) theme files – you do not need to touch the core source code.

Tip – Back up the files you are about to modify (or copy the whole /config and /skins directories).
Roundcube stores a lot of its UI in theme files, so modifying the wrong place could break the UI.

1. Locate the installation folders

The default theme is usually larry. If you want to keep the original roundcube untouched, copy the whole theme folder to a new folder (e.g., larry_custom) and use that.

Roundcube  can be configured to be located in any directory, based on the operating system, the mode of installation (e.g. manually, via a package manager or one of a control panel like Plesk) and the configuration of the server.

Common Installed Locations:

• Plesk: Roundcube was installed as a Plesk module, and can therefore be found in the /usr/share/psa-roundcube/ directory.
• Manual Installations: A standard directory is usually found where a manual installation can be found in the web server document root e.g. /var/www/html/roundcube or /var/www/roundcube.
• Package Installations (Ubuntu/Debian): Package Manager Installation The core program files may be installed in the /usr/share/ roundcube/ directory and configuration files in the /etc/ roundcube/ directory. These locations can then be symlinked within a web directory, e.g. /var/lib/roundcube.
• Docker: The install path of Roundcube in the Docker container is usually /var/www/html.

2. Change the Webmail title

Roundcube shows the application title in:

• the browser tab (HTML <title>)
• the top‑left corner of the UI (if the theme shows it)

Edit config.inc.php

<?php
// /config/config.inc.php

// 1. Change the application name (shown in the <title> tag)
$config['appname'] = 'MyCompany Mail';   // <-- put your desired title here

// 2. Optional: set a custom theme
$config['theme'] = 'larry_custom';      // use your custom theme folder

If you change the title in the UI (e.g., a header logo text), you’ll do that in the theme’s header.inc.php (see § 4).

After editing, clear your browser cache or do a hard refresh (Ctrl+F5) and you should see the new title in the tab.

3. Change Roundcube Logo

Roundcube themes typically keep a logo image in the theme’s assets folder. The default is logo.png.

Simple replacement

1. Locate the file:
   /skins/larry/assets/logo.png
   (or in your custom theme folder, e.g., /skins/larry_custom/assets/logo.png)
2. Replace it with your own PNG/JPEG/SVG file of the same size (or resize it).
   Tip: Keep the original dimensions (about 215 × 65 px for larry) so you don’t need to edit CSS.

Advanced – change only the CSS

If you want a different logo size or placement, edit the CSS.

/* /skins/larry_custom/css/main.css  (or custom.css if you use it) */
#header .logo {
    background-image: url('../assets/my-logo.png');
    width: 220px;
    height: 70px;
}

Add your image to the assets/ folder and adjust width/height as needed.

4. Modify the header (top bar)

The header is built from a template file that you can edit or override.

a. Edit the default header template

// /skins/larry/header.inc.php

• Look for the block that outputs the application name and logo.
• Add, remove or re‑order elements (e.g., a custom menu, contact info, etc.).

Example of adding a custom link:

<?php /* Custom header addition */ ?>
<li class="custom-link"><a href="https://vvcares.com">Webmail Support</a></li>

Then adjust the CSS if the new element needs styling.

b. Override the header (without touching core)

1. Copy header.inc.php to your custom theme folder (/skins/larry_custom/header.inc.php).
2. Edit the copy – your changes will take effect while keeping the original intact.

5. Change the footer

Roundcube’s footer is typically static, but you can easily make it dynamic.

5.1 Edit the footer template

// /skins/larry/footer.inc.php

You can add text, links, copyright notices, or even short PHP snippets (Roundcube allows PHP in templates).

Example:

<?php /* Custom Footer */ ?>
<div class="footer-info">
    <p>&copy; 2025 MyCompany Ltd. | <a href="https://vvcares.com">Privacy Policy</a></p>
</div>

5.2 Override the footer

Same process as the header: copy to larry_custom/footer.inc.php and edit.

6. Bonus: Using a “Custom” CSS file

Roundcube lets you create a custom.css that is loaded after the theme’s CSS.
Create it in the theme folder:

/skins/larry_custom/css/custom.css

Add any CSS overrides you need—e.g., change font family, colors, spacing—without editing the theme’s main.css.

/* custom.css example */
body { font-family: 'Open Sans', sans-serif; }
#loginform .form-group { margin-bottom: 12px; }

Make sure the file is referenced in the theme’s skin.inc.php (the default larry theme already includes it).

7. Restart / Clear Cache

After modifying files, you usually don’t need to restart anything, but if you see no changes:

1. Clear Roundcube’s cache directory:

   rm -rf /path/to/roundcube/cache/* 

2. Clear your browser cache or open a private/incognito window.

8. Summary Checklist

🎉 Final Thought

With these steps you can fully tailor Roundcube’s look‑and‑feel to match your brand or internal style guidelines.
If you ever need more advanced UI tweaks, consider creating a small plugin or using the Roundcube plugin API—everything is modular, so you can keep the core untouched and upgrade with confidence. Happy customizing!