Custom CSS in Jupiter for Webmail interface - How to add your own stylesheet

pkiff

pkiff

Active Member
Jul 31, 2007
28
4
53
Toronto
cPanel Access Level
Root Administrator
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:
/usr/local/cpanel/base/webmail/jupiter

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:
.../jupiter/_assets/master.html.tt

The 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') %]" />
The 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.css

As 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;
}
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.
 
Last edited:
B

braecht

Registered
May 24, 2023
2
1
3
EU
cPanel Access Level
Root Administrator
Thanks a lot.

I'm on 112.0.1, had to tweak the css like this to get it to work (no idea why):
Code: 
// Hide Horde banner in webmail landing home page
div#wmbanner {
    display: none;
}

#wmbanner {
    display: none;
}

// Hide "Set up email on your device" until it works
div#checkWithDevice {
    display: none;
}

#checkWithDevice {
    display: none;
}
 
Last edited:
  • Like
Reactions: pkiff
B

braecht

Registered
May 24, 2023
2
1
3
EU
cPanel Access Level
Root Administrator
I am currently working again on the tedious task of adapting jupiter to our CI for V114.

@pkiff: You wrote in another thread that you wanted to set up something external (a blog or an external forum) regarding jupiter CSS changes, have you already done this?
 
pkiff

pkiff

Active Member
Jul 31, 2007
28
4
53
Toronto
cPanel Access Level
Root Administrator
No, I didn't. I may get to it this fall some time (i.e. Sept-Dec 2023).

But I am still using the methods I described in this thread and it works fine. If you try it and something doesn't work, I am watching this thread and will try to help if I can?

My hope originally was that perhaps others would lend their expertise in this same thread and a tiny community of themers would emerge here. But I think that the inability to edit posts prevents a single thread from becoming a reliable and easily usable resource in this forum. The tendency I see is that instead folks (like I did when I started this very thread!) will keep starting new threads whenever someone stumbles upon this issue and it makes it hard to develop any depth of community knowledge.
 
You must log in or register to reply here.
Thread starter Similar threads Forum Replies Date
JIKOmetrix In Progress CPANEL-42960 - cPanel update to 112.03 broke logo display in customization User Experience 2
M Possibility to customize favicon and colors of WHM administration panel User Experience 1
pkiff Custom CSS in Jupiter for main cPanel interface - How to add your own stylesheet User Experience 1
S cPanel Jupiter custom theme - any available? User Experience 2
J Jupiter custom css/stylesheet User Experience 8
Similar threads
In Progress CPANEL-42960 - cPanel update to 112.03 broke logo display in customization
Possibility to customize favicon and colors of WHM administration panel
Custom CSS in Jupiter for main cPanel interface - How to add your own stylesheet
cPanel Jupiter custom theme - any available?
Jupiter custom css/stylesheet
Top Bottom