I am sharing a (provisional, unapproved) method to add a custom stylesheet to the Jupiter theme used in the Webmail interface. As of May 2023, cPanel (version 110.0.5 - RELEASE tier) does not provide an official, supported method to do this.
Note:
The Jupiter theme used in the Webmail interface is different than the Jupiter theme used in the main cPanel interface.
This thread is dedicated to:
Custom CSS in Jupiter for Webmail interface - How to add your own stylesheet
A separate thread is dedicated to:
Custom CSS in Jupiter for main cPanel interface - How to add your own stylesheet
Summary:
We insert a link to a new custom stylesheet in the master template of the Jupiter theme for Webmail.
Why?
A custom stylesheet allows administrators to customize the Webmail interface in order to align it more closely with their own branding. It can also be used as a kludge to hide some page elements that administrators don't want their users to interact with. Elements hidden using CSS are still visible in the source code, so this is not a perfect or long-term solution. But custom CSS offers a quick, simple way of modifying the interface without worrying about introducing serious new bugs or security risks.
Details:
The Jupiter theme for the Webmail interface on my system is stored here:
Webmail pages are built on top of a master template written in the Template Toolkit format used by cPanel. That master template is stored here:
The first 300 lines or so of the master template generate the
The
Then add your
As an example of what you can then do with this Webmail CSS overrides file, I have added the following code to
It is unclear how often this change will be overwritten by cPanel updates, but since these are only CSS changes, then the worst that will happen if they are overwritten is that your users will see the default Webmail interface instead of your customized version.
Note:
The Jupiter theme used in the Webmail interface is different than the Jupiter theme used in the main cPanel interface.
This thread is dedicated to:
Custom CSS in Jupiter for Webmail interface - How to add your own stylesheet
A separate thread is dedicated to:
Custom CSS in Jupiter for main cPanel interface - How to add your own stylesheet
Summary:
We insert a link to a new custom stylesheet in the master template of the Jupiter theme for Webmail.
Why?
A custom stylesheet allows administrators to customize the Webmail interface in order to align it more closely with their own branding. It can also be used as a kludge to hide some page elements that administrators don't want their users to interact with. Elements hidden using CSS are still visible in the source code, so this is not a perfect or long-term solution. But custom CSS offers a quick, simple way of modifying the interface without worrying about introducing serious new bugs or security risks.
Details:
The Jupiter theme for the Webmail interface on my system is stored here:
/usr/local/cpanel/base/webmail/jupiterWebmail pages are built on top of a master template written in the Template Toolkit format used by cPanel. That master template is stored here:
.../jupiter/_assets/master.html.ttThe first 300 lines or so of the master template generate the
<head> section. You can insert a link to your own custom CSS stylesheet into the head, following the <style> block code that inserts the other stylesheets, found at around line 243. Here is a sample line of code to insert:
Code:
<link rel="stylesheet" type="text/css" href="[% theme_magic_url('css/my_webmail_overrides.min.css') %]" />theme_magic_url function helps to improve performance by caching I think. I use a minimized CSS file that I generate using a preprocessor, but it doesn't have to be minimized nor do you need to use a preprocessor.Then add your
my_webmail_overrides.min.css file to the CSS folder here:.../jupiter/css/my_webmail_overrides.min.cssAs an example of what you can then do with this Webmail CSS overrides file, I have added the following code to
my_webmail_overrides.min.css in order to hide the "Set up email on your device" section (which currently has a bug that means the email function does not work for my users), and to hide the notification about Horde being removed (since none of my users have ever used or even heard of Horde):
Code:
// Hide "Set up email on your device" until it works
#checkWithDevice {
display: none;
}
// Hide Horde banner in webmail landing home page
#wmbanner {
display: none;
}
Last edited:
