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

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: 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
section. You can insert a link to your own custom CSS stylesheet into the head, following the
block code that inserts the other stylesheets, found at around line 243. Here is a sample line of code to insert:

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):


// 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.

pkiff

May 18, 2023 18:04

[Reserved for revision notes]

braecht

May 24, 2023 09:27

Thanks a lot. I'm on 112.0.1, had to tweak the css like this to get it to work (no idea why):


// 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;
}

August 22, 2023 13:48

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?

August 22, 2023 15:59

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.

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

Comments

Didn't find what you were looking for?