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

 

Introduction

You can add one or more custom icons or logos to your custom cPanel style.  If you add a custom logo to your style, cPanel users will see your custom logo instead of the default cPanel logo.

Note:

You can also use WHM's Customization interface (Home >> cPanel >> Customization) to upload custom logos. In cPanel & WHM version 58 and earlier, this was WHM's Branding interface (Home >> cPanel >> Branding). 

The root user can add server-wide custom logos that cPanel users cannot override, and resellers can add a custom logo for the accounts that they own. This logo displays in the cPanel or Webmail interface's header, and replaces the default cPanel or Webmail logo.

Logo files

Your custom logo must use the appropriate filename:

  • cPanel logo — logo.svg or logo.png
  • Webmail logo — webmail.svg or webmail.png

The system checks for a .svg logo first. If no .svg logo exists, the system uses the .png logo, if one exists.

Note:

 We added support for the .svg file format in cPanel & WHM version 60. In cPanel & WHM version 58 and earlier, you must use a .png image.

We recommend that you use a 250 by 50 pixel logo.

  • In cPanel & WHM version 68 and later, we strongly recommend a logo height of 20 pixels.
  • You must specify the height in .svg logo files.

Directories

You must store your custom logos in the appropriate directory:

  • To add a custom logo for all of the accounts on the server, save the desired logo in the  /var/cpanel/customizations/brand/ directory. 
    • This action requires  root-level permissions on the server.
    • If this directory does not already exist, you must create it.
  • To add a custom logo for all of the accounts that a reseller owns, save the desired logo in the /home/username/var/cpanel/reseller/brand/ directory, where username represents the reseller's username. 
    • If the server uses a customized home directory path, make certain that you use the appropriate path for that home directory.
    • If this directory does not already exist, you must create it.

Add custom icons

To replace the default cPanel icons with your own icons, perform the following steps:

  1. In your style's directory, create the icons subdirectory.
  2. Save your icons with the same name and file extension as the feature icons that you wish to replace. 
    • For example, to replace the File Manager icon, save a .png version of the icon as the file_manager.png file (cPanel & WHM version 58 and earlier) or an .svg version of the icon as the file_manager.svg file (cPanel & WHM version 60 and later).
    • For a full list of feature icon names, read our Guide to cPanel Interface Customization - Appkeys documentation.
After you apply a style that uses custom icons, run the following command, where mystyle represents the style name:

/usr/local/cpanel/bin/sprite_generator --theme paper_lantern --style mystyle

The /usr/local/cpanel/bin/sprite_generator utility integrates your icons into the new icon set.

Add a preview image

To add a preview image to your custom style, save the image as the preview.png file within the style's directory.

  • cPanel's  Change Style interface (Home >> Preferences >> Change Style) and WHM's Customization interface (Home >> cPanel >> Customization) will display this image with the options for the style.
  • We recommend that you use a 500 by 500 pixel image as the preview image.

Images in custom style CSS

After you apply a style, the system generates the current_style symlink in the style directory. The current_style symlink always points to the active style that the user selected in cPanel's  Change Style  interface ( Home >> Preferences >> Change Style ). If you use the /styled/current_style path to link external styles in your styles.css file, the cpsrvd daemon queries the current style for those assets.

For example, to add a background image that links to your current style to the cPanel interface, include the following CSS statement in the styles.css file:

body {
   background-image:url("/styled/current_style/image.png");
}