Development Guides Home >> Guide to cPanel Interface Customization and Branding >> Guide to cPanel Interface Customization - Style Development

Guide to cPanel Interface Customization - Custom Icons and Logos

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.

Add a custom logo

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.

You can also use WHM's Customization interface (WHM >> Home >> cPanel >> Customization) to upload custom logos.

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.

If you upload an image file in WHM's Customization interface (WHM >> Home >> cPanel >> Customization), the system converts the file to an .svg file.

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 an .svg version of the icon as the file_manager.svg file.
   • 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 ( cPanel >> Home >> Preferences >> Change Style ) and WHM's Customization interface ( WHM >> 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 (cPanel >> 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");
  }