{"id":97,"date":"2021-11-01T14:52:14","date_gmt":"2021-11-01T14:52:14","guid":{"rendered":"https:\/\/vvcares.com\/2\/?p=97"},"modified":"2025-09-16T18:36:49","modified_gmt":"2025-09-16T13:06:49","slug":"how-to-change-roundcube-webmail-title-change-logo-change-header-change-footer","status":"publish","type":"post","link":"https:\/\/vvcares.com\/blog\/how-to-change-roundcube-webmail-title-change-logo-change-header-change-footer\/","title":{"rendered":"HOW TO CHANGE ROUNDCUBE WEBMAIL TITLE, CHANGE LOGO-HEADER-FOOTER"},"content":{"rendered":"\r\n<p>Below is a quick\u2011start guide you can follow to change the title, logo, header and footer of a <strong>Roundcube Webmail<\/strong> installation.<br \/>Everything is done by editing a few configuration files and (optionally) theme files \u2013 you do <strong>not<\/strong> need to touch the core source code.<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p><strong>Tip<\/strong> \u2013 Back up the files you are about to modify (or copy the whole <code>\/config<\/code> and <code>\/skins<\/code> directories).<br \/>Roundcube stores a lot of its UI in theme files, so modifying the wrong place could break the UI.<\/p>\r\n<\/blockquote>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">1. Locate the installation folders<\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\">\r\n<table class=\"has-fixed-layout\">\r\n<thead>\r\n<tr>\r\n<th>Folder<\/th>\r\n<th>What it contains<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><code>\/config<\/code><\/td>\r\n<td>Global configuration \u2013 <code>config.inc.php<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><code>\/skins<\/code><\/td>\r\n<td>All UI themes (e.g., <code>larry<\/code>, <code>classic<\/code>, <code>nette<\/code>, \u2026)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><code>\/locale<\/code><\/td>\r\n<td>Language files (used for the title if you want to localise it)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>The default theme is usually <code>larry<\/code>. If you want to keep the original roundcube untouched, copy the whole theme folder to a new folder (e.g., <code>larry_custom<\/code>) and use that.<\/p>\r\n<p><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2p_\" data-state=\"closed\"><a href=\"https:\/\/roundcube.net\/\"><strong>Roundcube<\/strong> <\/a>\u00a0can be configured to be located in any directory, <span style=\"text-decoration: underline;\">based on the operating system<\/span>, 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.<\/span><\/p>\r\n<p><strong>Common Installed Locations:<\/strong><\/p>\r\n<ul>\r\n<li><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2q_\" data-state=\"closed\"><a href=\"https:\/\/support.plesk.com\/hc\/en-us\/articles\/12377287661719-How-to-install-and-manage-webmail-in-Plesk\"><strong>Plesk<\/strong><\/a>: Roundcube was installed as a Plesk module, and can therefore be found in the <span style=\"color: #0000ff;\">\/usr\/share\/psa-roundcube\/ directory<\/span>.<\/span><\/li>\r\n<li><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2r_\" data-state=\"closed\"><a href=\"https:\/\/contabo.com\/blog\/roundcube-webmail-comprehensive-features-and-step-by-step-setup-guide\/\"><strong>Manual Installations<\/strong>:<\/a> A<\/span><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2r_\" data-state=\"closed\"> standard directory is usually found where a manual installation can be found in the web server document root e.g. <span style=\"color: #0000ff;\"><em>\/var\/www\/html\/roundcube <span style=\"color: #000000;\">or<\/span> \/var\/www\/roundcube.<\/em><\/span><\/span><\/li>\r\n<li><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2s_\" data-state=\"closed\"><strong><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-install-your-own-webmail-client-with-roundcube-on-ubuntu-16-04\">Package Installations<\/a> (Ubuntu\/Debian)<\/strong>: Package Manager Installation The core program files may be installed in the \/usr\/share\/ roundcube\/ directory and configuration files in the \/<span style=\"color: #0000ff;\">etc\/ roundcube\/<\/span> directory.<\/span> <span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2t_\" data-state=\"closed\">These locations can then be symlinked within a web directory, e.g. <span style=\"color: #0000ff;\">\/var\/lib\/roundcube<\/span>.<\/span><\/li>\r\n<li><span aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"radix-_r_2u_\" data-state=\"closed\"><a href=\"https:\/\/hub.docker.com\/r\/roundcube\/roundcubemail\/\"><strong>Docker<\/strong><\/a>: The install path of Roundcube in the Docker container is usually <span style=\"color: #0000ff;\">\/var\/www\/html<\/span>.<\/span><\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">2. Change the Webmail title<\/h2>\r\n\r\n\r\n\r\n<p>Roundcube shows the <em>application title<\/em> in:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>the browser tab (HTML <code>&lt;title&gt;<\/code>)<\/li>\r\n\r\n\r\n\r\n<li>the top\u2011left corner of the UI (if the theme shows it)<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Edit <code>config.inc.php<\/code><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;?php\r\n\/\/ \/config\/config.inc.php\r\n\r\n\/\/ 1. Change the application name (shown in the &lt;title&gt; tag)\r\n$config['appname'] = 'MyCompany Mail';   \/\/ &lt;-- put your desired title here\r\n\r\n\/\/ 2. Optional: set a custom theme\r\n$config['theme'] = 'larry_custom';      \/\/ use your custom theme folder<\/code><\/pre>\r\n\r\n\r\n\r\n<p><em>If you change the title in the UI (e.g., a header logo text), you\u2019ll do that in the theme\u2019s <code>header.inc.php<\/code> (see \u00a7\u202f4).<\/em><\/p>\r\n\r\n\r\n\r\n<p>After editing, clear your browser cache or do a hard refresh (<code>Ctrl+F5<\/code>) and you should see the new title in the tab.<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">3. Change Roundcube Logo<\/h2>\r\n\r\n\r\n\r\n<p>Roundcube themes typically keep a logo image in the theme\u2019s <code>assets<\/code> folder. The default is <code>logo.png<\/code>.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Simple replacement<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Locate<\/strong> the file:<br \/><code>\/skins\/larry\/assets\/logo.png<\/code><br \/>(or in your custom theme folder, e.g., <code>\/skins\/larry_custom\/assets\/logo.png<\/code>)<\/li>\r\n\r\n\r\n\r\n<li><strong>Replace<\/strong> it with your own PNG\/JPEG\/SVG file of the same size (or resize it).<br \/><em>Tip:<\/em> Keep the original dimensions (about 215\u202f\u00d7\u202f65\u202fpx for larry) so you don\u2019t need to edit CSS.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Advanced \u2013 change only the CSS<\/h3>\r\n\r\n\r\n\r\n<p>If you want a different logo size or placement, edit the CSS.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/* \/skins\/larry_custom\/css\/main.css  (or custom.css if you use it) *\/\r\n#header .logo {\r\n    background-image: url('..\/assets\/my-logo.png');\r\n    width: 220px;\r\n    height: 70px;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Add your image to the <code>assets\/<\/code> folder and adjust <code>width<\/code>\/<code>height<\/code> as needed.<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">4. Modify the header (top bar)<\/h2>\r\n\r\n\r\n\r\n<p>The header is built from a template file that you can edit or override.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">a. Edit the default header template<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/\/ \/skins\/larry\/header.inc.php<\/code><\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Look for the block that outputs the application name and logo.<\/li>\r\n\r\n\r\n\r\n<li>Add, remove or re\u2011order elements (e.g., a custom menu, contact info, etc.).<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Example of adding a custom link:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;?php \/* Custom header addition *\/ ?&gt;\r\n&lt;li class=\"custom-link\"&gt;&lt;a href=\"https:\/\/vvcares.com\"&gt;Webmail Support&lt;\/a&gt;&lt;\/li&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Then adjust the CSS if the new element needs styling.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">b. Override the header (without touching core)<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li>Copy <code>header.inc.php<\/code> to your custom theme folder (<code>\/skins\/larry_custom\/header.inc.php<\/code>).<\/li>\r\n\r\n\r\n\r\n<li>Edit the copy \u2013 your changes will take effect while keeping the original intact.<\/li>\r\n<\/ol>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">5. Change the footer<\/h2>\r\n\r\n\r\n\r\n<p>Roundcube\u2019s footer is typically static, but you can easily make it dynamic.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">5.1 Edit the footer template<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/\/ \/skins\/larry\/footer.inc.php<\/code><\/pre>\r\n\r\n\r\n\r\n<p>You can add text, links, copyright notices, or even short PHP snippets (Roundcube allows PHP in templates).<\/p>\r\n\r\n\r\n\r\n<p>Example:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;?php \/* Custom Footer *\/ ?&gt;\r\n&lt;div class=\"footer-info\"&gt;\r\n    &lt;p&gt;&amp;copy; 2025 MyCompany Ltd. | &lt;a href=\"https:\/\/vvcares.com\"&gt;Privacy Policy&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">5.2 Override the footer<\/h3>\r\n\r\n\r\n\r\n<p>Same process as the header: copy to <code>larry_custom\/footer.inc.php<\/code> and edit.<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">6. Bonus: Using a \u201cCustom\u201d CSS file<\/h2>\r\n\r\n\r\n\r\n<p>Roundcube lets you create a <code>custom.css<\/code> that is loaded after the theme\u2019s CSS.<br \/>Create it in the theme folder:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/skins\/larry_custom\/css\/custom.css<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Add any CSS overrides you need\u2014e.g., change font family, colors, spacing\u2014without editing the theme\u2019s <code>main.css<\/code>.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/* custom.css example *\/\r\nbody { font-family: 'Open Sans', sans-serif; }\r\n#loginform .form-group { margin-bottom: 12px; }<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Make sure the file is referenced in the theme\u2019s <code>skin.inc.php<\/code> (the default larry theme already includes it).<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">7. Restart \/ Clear Cache<\/h2>\r\n\r\n\r\n\r\n<p>After modifying files, you usually don\u2019t need to restart anything, but if you see no changes:<\/p>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li>Clear Roundcube\u2019s cache directory:<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>   rm -rf \/path\/to\/roundcube\/cache\/* <\/code><\/pre>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\" start=\"2\">\r\n<li>Clear your browser cache or open a private\/incognito window.<\/li>\r\n<\/ol>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">8. Summary Checklist<\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\">\r\n<table class=\"has-fixed-layout\">\r\n<thead>\r\n<tr>\r\n<th>Task<\/th>\r\n<th>Where to edit<\/th>\r\n<th>Quick file path<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>Title (browser tab)<\/td>\r\n<td>config<\/td>\r\n<td><code>\/config\/config.inc.php<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Logo<\/td>\r\n<td>theme assets<\/td>\r\n<td><code>\/skins\/larry\/assets\/logo.png<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Header layout<\/td>\r\n<td>template<\/td>\r\n<td><code>\/skins\/larry\/header.inc.php<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Footer layout<\/td>\r\n<td>template<\/td>\r\n<td><code>\/skins\/larry\/footer.inc.php<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Custom CSS<\/td>\r\n<td>theme CSS<\/td>\r\n<td><code>\/skins\/larry_custom\/css\/custom.css<\/code><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Use custom theme<\/td>\r\n<td>config<\/td>\r\n<td><code>$config['theme'] = 'larry_custom';<\/code><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/figure>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\ud83c\udf89 Final Thought<\/h3>\r\n\r\n\r\n\r\n<p>With these steps you can fully tailor Roundcube\u2019s look\u2011and\u2011feel to match your brand or internal style guidelines.<br \/>If you ever need more advanced UI tweaks, consider creating a small plugin or using the Roundcube plugin API\u2014everything is modular, so you can keep the core untouched and upgrade with confidence. Happy customizing!<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Below is a quick\u2011start 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 \u2013 you do not need to touch the core source code. Tip \u2013 Back up the files you are about to modify [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":180,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,11,1,14],"tags":[25],"class_list":["post-97","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hestiacp","category-linux-ubuntu","category-servers","category-website-designing","tag-hestiacp"],"_links":{"self":[{"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":6,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":614,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/media\/180"}],"wp:attachment":[{"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vvcares.com\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}