Creating a Customizable Header and Footer in Roundcube

samuelolavo · June 12, 2025, 11:30:45 AM

Hi everyone,

I'm currently trying to add a customizable header and footer to my Roundcube webmail interface. I attempted to create separate HTML files and include them directly in the theme (Elastic), but I'm running into some layout issues, particularly when trying to ensure that email content isn't affected or misaligned.

I'm using the latest version of Roundcube.

Is there an official or recommended way to include a persistent header and footer across all pages (except the message view, ideally), possibly with support for a toggle button to show/hide them?

Any guidance, plugin recommendations, or example implementations would be greatly appreciated.

Thanks in advance!

JohnDoh · June 13, 2025, 11:24:58 AM

Can you describe the your issue a little more please? I guess your extending the Elastic skin and you've modified `templates/includes/layout.html` and `templates/includes/footer.html` to add your new header/footer template objects?

QuoteIs there an official or recommended way to include a persistent header and footer across all pages (except the message view, ideally), possibly with support for a toggle button to show/hide them?

The Elastic skin uses Bootstrap 4 please have a look at that documentation for examples of toggles.

samuelolavo · June 23, 2025, 08:16:13 AM

Hi again,

I'm trying to add a static custom header and footer to the Elastic theme in Roundcube. The goal is simple: I want a header at the top and a footer at the bottom of every page — outside the main mail interface — without interfering with any content, especially mail reading, writing, or listing.

I created a partial file called header_dei.html in templates/includes/, with a simple UC logo wrapped in a <div> block. I then included it in layout.html like this:

<include file="includes/header.html" />
I placed it right after the <body> tag. However, when I load Roundcube, the layout becomes broken: the header appears, but the main interface shifts or behaves unexpectedly (scrollbars appear, mailboxes are pushed down, etc.).

I don't want the header/footer to be part of the message pane or mailbox UI — just visually sit above and below everything.

What I'm looking for:
Best way to include a static header/footer that stays out of the main Elastic layout

Doesn't interfere with the content area or the JS/CSS positioning of mail elements

Works well in both normal and iframe/framed views

Is there a recommended place in the theme's structure for inserting such elements? Do I need to wrap them in special containers or avoid certain layout areas?

Thanks in advance for any suggestions or examples!

JohnDoh · June 24, 2025, 08:33:07 AM

here is a very basic example which might help you get started. you can't just add a div, you need to add some CSS as well to define the new layout.

Code Select

diff --git a/skins/elastic/templates/includes/footer.html b/skins/elastic/templates/includes/footer.html
index ec64cbcae..8e78c27da 100644
--- a/skins/elastic/templates/includes/footer.html
+++ b/skins/elastic/templates/includes/footer.html
@@ -3,6 +3,7 @@
 <roundcube:if condition="config:support_url" />
 <a href="<roundcube:var name='config:support_url' />" target="_blank" id="supportlink" class="hidden"><roundcube:label name="support" /></a>
 <roundcube:endif />
+<div id="xxfooter">xxfooter</div>
 <roundcube:endif />
 
 <roundcube:object name="message" id="messagestack" />
diff --git a/skins/elastic/templates/includes/layout.html b/skins/elastic/templates/includes/layout.html
index 90a837414..b25f26e31 100644
--- a/skins/elastic/templates/includes/layout.html
+++ b/skins/elastic/templates/includes/layout.html
@@ -40,7 +40,8 @@
 		</script>
 	<roundcube:endif />
 </head>
-<body class="task-<roundcube:exp expression="env:error_task ?: env:task ?: 'error'"> action-<roundcube:exp expression="asciiwords(env:action, true, '-') ?: 'none'">">
+<body class="task-<roundcube:exp expression="env:error_task ?: env:task ?: 'error'"> action-<roundcube:exp expression="asciiwords(env:action, true, '-') ?: 'none'">" style="<roundcube:exp expression="!env:framed || env:extwin ? 'display: flex; flex-direction: column;': ''">">
 	<roundcube:if condition="!env:framed || env:extwin" />
-		<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout">
+		<div id="xxheader">xxheader</div>
+		<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout" style="position: relative;">
 	<roundcube:endif />

also i suggest you extend the Elastic skin not modify the core files so that your customization can survive updates.

Creating a Customizable Header and Footer in Roundcube

samuelolavo

JohnDoh

samuelolavo

JohnDoh