There was a problem loading the comments.

cPanel Branding Basics: A Guide for Resellers

Support Portal  »  Knowledgebase  »  Viewing Article


Brand customization

To increase brand awareness, it’s beneficial to provide your customers with a way to identify and associate your brand with the cPanel dashboard. Here is the first course of action necessary to change the cPanel logo to your own custom logo.
WHM cPanel Brand
  1. Log into your WHM dashboard [ex:]
  2. Navigate to cPanel > Customization
  3. Type in your company name
  4. Upload your company logo
  5. Upload favicon
  6. Click Save

When you’re finished, switch and log into the cPanel dashboard [ex:] and you’ll notice your logo and favicon has been updated.
cPanel Brand Result


The bulk of customization is done through CSS. The diagram below shows the common elements, in IDs and Classes, that allow you to specify and modify custom style.

Pro Tip:

You can use your mouse and right click on any area in your Chrome or FireFox browser and select inspect element within cPanel dashboard to identify existing IDs and Classes with the style code. Inspecting elements and the steps below will show how each design can be overridden to your own custom style.
cPanel's CSS Elements
  1. In your cPanel dashboard – navigate to Home > Files and select File Manager
  2. In File Manager, navigate to, or create the directory var/cpanel/reseller/styled if it doesn’t exist
  3. Under styled folder – create your own folder name for the theme: ex: My_Custom_Theme
  4. Within the same directory – create a new file and name it styles.css (must be exactly as it’s spelled and lower caps)
  5. Right click styles.css and click edit
  6. In your styles.css type in the following
    .navbar-preferences {background-color: blue;}
  7. Save Changes
  8. Change your style to your own custom style (User Preferences > 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.
  9. 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
By now your directory path should look similar to the image you see above.
I encourage you to keep tinkering with 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.


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 ”” and “”. 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 “” and “”. 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
  1. In your File Manager – create a folder name includes under this directory var/cpanel/reseller/
  2. Under the includes folder – Create the following files and name them exactly below:
    To view the filenames on different page templates, visit documentation at Customize Content in Paper Lantern
  3. Within each file, enter the following code:
    • Global Header:
      <div style="background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;">Global Header Area</div> 
    • Global Footer:
      <div style="background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;">Global Footer Area</div> 
    • FTP Header:
      <div style="background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;">FTP Header Area</div> 
    • FTP Footer:
      <div style="background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;">FTP Footer Area</div> 
  4. Save
Go to your cPanel dashboard and refresh your browser. You’ll notice all pages have global content and FTP accounts page only include specific content for that page.
cPanel Customize Content Results

Share via
Did you find this article useful?  

Related Articles

© Brixly