Child pages
  • How to Customize the WHM User Interface with CSS
Skip to end of metadata
Go to start of metadata

Overview

You can use locally-provided style sheets to customize the appearance of the WHM interface. After you implement the customized theme, the system will apply it to every account on the server.

Note

You must log in to your server as the root user to customize the WHM theme.

Create a cloned theme

To create a cloned theme, perform the following steps:

  1. Create a new theme directory. To do this, perform either of the following actions:
    • Create a new directory with the following command:

      mkdir /usr/local/cpanel/whostmgr/docroot/themes/my_theme
    • Clone WHM's x theme with the Theme Manager interface (Home >> Themes >> Theme Manager). 

      Note:

      In cPanel & WHM version 11.50, we changed the name of the Universal Theme Manager interface to Theme Manager.

  2. Add CSS files to customize the WHM interface. Create the following files and populate them with you own CSS rules:
    • menu.css — Customizes the left navigation menu.
    • main.css — Customizes the right frame, which stores most UI content.

Change the selected theme

To change the selected theme to your customized theme, navigate to the Change WebHost Manager® Theme interface (Home >> Themes >> Change WebHost Manager® Theme) and perform the following steps:

  1. Click to view the theme.
  2. Click Switch to theme to change the current WHM theme.

To set your new customized link via the command line, run the following command:

echo 'my_theme' > ~/.whmtheme

Note:

For the customizations of the left navigation menu to properly load, you may need to run the following command:

/usr/local/cpanel/whostmgr/docroot/themes/x/rebuildtmpl

Additional documentation