Page tree
Skip to end of metadata
Go to start of metadata

Introduction

This tutorial customizes the appearance of a WHM interface theme. After you implement the customized theme, the system will apply it to every account on the server. 

Warning:

This tutorial is for cPanel & WHM version 64 and earlier only

For the purposes of cPanel, Inc.'s products and documentation, we use the following terms:

  • Branding — Modifications to the cPanel interface in order to match your company's logo and brand. 
    • Branding changes include updates to image assets or text labels.
    • For more information, read our Branding documentation.
  • Includes — UI includes add custom content to the header or footer of the cPanel interface (but not the WHM interface). 
    • You can create UI includes for specific cPanel interfaces, or global UI includes that display on all of cPanel's interfaces. 
    • For more information, read our UI Includes documentation.
  • Plugin — A plugin modifies an interface's features or functionality, and may also include changes to the interface's appearance.
    • You can write plugins for the cPanel or WHM interfaces.
    • For more information, read our Guide to cPanel Plugins documentation.
  • Style  — A style uses CSS, images, and other assets to modify the appearance of the entire cPanel interface  without  changes to its functionality or features. 
    • You can create and apply styles to an entire server or a specific reseller's accounts, or you can create them for distribution. 
    • For more information, read our cPanel Style Development documentation.
  • Theme — A skeletal framework of interfaces, over which the system applies one of that theme's styles.
    • cPanel & WHM currently ships with one default cPanel theme and one default WHM theme.
    • The Webmail and login interfaces also use themes.

Notes:

  • You must log in to your server as the root user in order to customize the WHM theme.
  • The steps in this tutorial only customize the appearance of the WHM interface. For more information about how to customize the appearance of cPanel's interfaces, read our Guide to cPanel Interface Customization and Branding documentation.

Customize the WHM interface with CSS


Create a new theme directory.

To create a new WHM theme directory, perform the following steps:

  1. On the command line, SSH in to the server on which you wish to create the theme.

  2. Create the  /usr/local/cpanel/whostmgr/docroot/themes/themename/  directory, where themename represents the desired theme name.

Note:

You can also use WHM's Theme Manager interface (Home >> Themes >> Theme Manager) to upload themes.

  • If you use this interface, you can develop the theme in any location, and then upload it before you apply the theme.

 

 

 


 

Create the CSS files.

Use your preferred text editor to create and modify the following CSS files in the new directory:

  • menu.css — This file customizes the WHM interface's left navigation menu.
  • main.css — This file customizes the WHM interface's main content area for some, but not all, of WHM's interfaces.

Note:

The system automatically applies this CSS over WHM's existing theme style sheets.

 


 

Apply the new WHM theme.

Use one of the following methods to apply the new theme to the WHM interface.

WHM interface

To change the selected theme to your customized theme, perform the following steps:

  1. Log in to WHM as the root user.

    Remember:

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

  2. If you did not develop the theme on the server, use WHM's Theme Manager interface (Home >> Themes >> Theme Manager) to upload the theme.

  3. Navigate to WHM's Change WebHost Manager® Theme interface (Home >> Themes >> Change WebHost Manager® Theme).
  4. Click the magnifying glass icon () to view the theme.
  5. Click Switch to theme.

Command line

To set your new customized link via the command line, run the following command, where themename represents the new theme's name:

echo 'themename' > ~/.whmtheme