WHM are tools that has become synonymous with web hosting. Once you wish to an account to start a web hosting business, even as a reseller, you will want to check if cPanel and WHM will be available. But in most cases, branding is an issue with this tools. While we hosting providers will easily use this software to manage their customers and provide easy-to-use web hosting platform for clients to manage their websites, email accounts, databases, and many more, they have little options to customize, personalize and do branding of the services they offer their clients.
cPanel and WHM recent built has changed all these. Now, with additions like Paper Lantern to our software suite, web hosts can alter the color, feel, and overall experience of the cPanel dashboard to provide their customers with a personally branded and truly unique cPanel experience. Now you can customize the cPanel dashboard as if it was your own product.
Preparation
To be able to implement any customizations, you will require a minimum of a cPanel Reseller account. You will find information related to Root accounts in cPanel Style Documentation.
Here are a few assumptions of what you'l need to have:
cPanel & WHM 11.50 or later
Reseller account
Basic knowledge of HTML/CSS/JS
Basic Command Line
Design software
You will then need to decide on the areas of customization you would wish to implement. Something like colors and layout, to simple behavior interactions.
Once you have an idea of the changes you’d like to make, take the time to draw it out. This will help you achieve your vision without losing sight of your objectives. Think of it as your goal post.
Branding
Building brand awareness is a good promotional strategy. This can be done by associating the cPanel dashboard with the brand. You can start by changing the cPanel logo to your own custom logo.
WHM cPanel Branding
Log into your WHM dashboard [ex: http://yourdomain.com/whm]
Navigate to cPanel > Branding
Type in your company name
Upload your company logo
Upload favicon
Click Save
Read also How do I create a cPanel account in WHM
You can confirm the changes you have made by logging in to the cPanel dashboard [ex: http://yourdomain.com/cpanel] and you'll notice your logo and favicon has been updated.
Branding cPanel CSS Elements
In your cPanel dashboard navigate to Home Files and select File Manager
You may be asked which directory to use, choose Home Directory
In File Manager, navigate to var/cpanel/
Create a folder called reseller if it does not exist.
Navigate to var/cpanel/reseller/ and create a folder called styled.
Under styled folder – create your own folder name for the theme: ex: My_Custom_Theme
Within the same directory, create a new file and name it styles.css (must be exactly as spelled and lower caps)
Right click styles.css and select code edit
In your styles.css type in the following
Save Changes
Change your style to your own custom style (User Profile; change style) and select Apply on My Custom Theme (you'll notice the background color on the navbar has changed in your cPanel dashboard). This is your theme.
To include a preview image on the Change Style interface. Screen capture your new interface or design your preview image (500 by 500 pixel and png format), save the file name to preview.png and upload it under My_Custom_Theme directory.
File Manager Directory Structure
There will be nothing wrong with tweaking your CSS style until you're satisfied. For further information on styling elements, you can read through cPanel documentation on setting up your stylesheet or writing your custom CSS.
Content
Sometimes styling the layout isn't enough. There might be occasions when additional pieces of information should be included in the dashboard. As of now, there are total of four available areas where you can include your own content. The first two areas are GLOBAL header and footer positions which show up on every page. The GLOBAL positions filename are ;global_header.html and global_footer.html.. Then the other two are PAGE TEMPLATES header and footer positions which only show up in the named app. The PAGE TEMPLATES positions filename are _page_header.html and _page_header.html. With these content additions, you have the options to include plain text, HTML, CSS, and JS to extend your UI enhancement further.
Customize Content Templates
For this example, we'll add content on both global and page templates using FTP account.
Content Templates Directory Structure
In your File Manager, create a folder name includes under this directory var/cpanel/reseller/
Under the includes folder, Create the following files and name them exactly as below:
global_header.html
global_footer.html
ftp_page_header.html
ftp_page_footer.html
The default cPanel icons are there to help users quickly identify the tools they need, however, they may not complement your custom design or style. Before moving forward, ensure that your custom icons are no bigger than 48x48px, alpha-transparent (no background color), and that they are saved in png format.
Customize FTP Accounts Icon
Design your custom icons. For this example let's redesign FTP Accounts icon.
Visit Paper Lantern's appkey documentation and find the icon you wish to replace. In this case, the appkey for FTP accounts is ftp_accounts.png so your custom icons should be saved as ftp_accounts.png.
In your File Manager, navigate to var/cpanel/reseller/styled/My_Custom_Theme/ and create a folder name icons
How to Set your style to default
You will need to set your default style to your own custom design. You can achieve this by going to user profile > change style > Set as Default on one of your custom design. Ensure that your Packages in WHM under settings has the cPanel Theme set to Paper Lantern by default. Once enabled, new and existing hosting account will automatically see your the new custom branded dashboard.
You now know how to rebrand the cPanel dashboard and customize it to your choice. The possibilities are endless. Take control of your brand. Build your brand and help its popularity.
