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
Custom styles are only available in the Paper Lantern theme. The Paper Lantern theme is now deprecated and will be removed. For more information, read our cPanel Deprecation Plan documentation.
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
orlogo.png
-
Webmail logo –
webmail.svg
orwebmail.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.
-
This action
requires
-
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, whereusername
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:
-
In your style's directory, create the
icons
subdirectory. -
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 thefile_manager.svg
file. - For a full list of feature icon names, read our Guide to cPanel Interface Customization - Appkeys documentation.
-
For example, to replace the
File Manager
icon, save an
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");
}