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

Webmail interface - How to add your own stylesheet Summary: We add a new LESS partial file to the pre-existing base_overrides LESS and then recompile base_overrides.min.css
. This method requires good familiarity with LESS, CSS preprocessors, and minification. Why? A custom stylesheet allows administrators to customize the cPanel 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 main cPanel interface on my system is stored here: /usr/local/cpanel/base/frontend/jupiter
My strategy for making changes here requires good familiarity with the CSS preprocessor LESS and with CSS minification. The main cPanel Jupiter files already include a CSS override file named base_overrides.min.css
located here: .../jupiter/css/base_overrides.min.css
cPanel seems to use this for its own overrides to a few elements of Jupiter that for whatever reason aren't fixed at source. The LESS files that generate base_overrides are located in a subfolder here: .../jupiter/css/base_overrides
and are called from here: .../jupiter/css/base_overrides.less
That LESS file simply calls the Index file found in the base_overrides folder: .../jupiter/css/base_overrides/index.less
Rather than editing page templates or scripts, to add a custom stylesheet, you can simply add your own CSS overrides to the base_overrides that cPanel already includes. To do this, you create your own LESS partial file (I begin the filename with an underscore following common SASS practice and to match the cPanel coding style here), add your CSS or LESS to it, and then add that file to the base_overrides folder here like so: .../jupiter/css/base_overrides/_my_cpanel_overrides.less
THEN explicitly import your new LESS file by adding an import reference to it at the end of the index.less
file in the same folder. In my install, these are lines 10 and 11 of index.less
: // My custom overrides to Jupiter @import "_my_cpanel_overrides.less";
Then compile the base_overrides.less
file and upload the base_overrides.min.css
to your server in the same location where you found it. I found that in order to compile base_overrides.less
locally, I needed to add the following two LESS files that are referenced by base_overrides in addition to adding all the base_overrides folders, subfolders and files: .../jupiter/libraries/base-styles/variables.less
.../jupiter/shared/css/jupiter.less
As an example of what you can do with this cPanel CSS override file, I have added the following code to _my_cpanel_overrides.less
in order to hide the Horde notification that currently cannot be disabled by owners or properly dismissed by users: // Hide Horde Banner #cpHordeBanner { display: none !important; }
It is unclear how often the base_overrides.min.css file will be overwritten by cPanel updates, or if it will in fact be removed entirely at some point in the future. But since these edits result in a change only to that single CSS file, then the worst that will happen if they are overwritten is that your users will see the default cPanel interface instead of your customized version.