Child pages
  • Guide to cPanel Interface Customization - Troubleshoot Custom Styles

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

 

Introduction

Excerpt
Use this document to troubleshoot your custom styles.


Warning
titleImportant:

Include Page
LIB:_StyleUpdate
LIB:_StyleUpdate

Custom CSS does not render


Section


Column
width10%

Problem:


Column

The cPanel interface does not render some or all of the custom CSS elements that you added to the styles.css file.



Section


Column
width10%

Solution:


Column

In most cases, this problem occurs because the styles.css file does not exist in the correct location. Make certain that you saved your styles.css file in the appropriate location:

Multiexcerpt include
MultiExcerptNameDirectories
DisableCachingtrue
PageWithExcerptGuide to cPanel Interface Customization - cPanel Style Development
 

If the styles.css file exists in the correct location, perform the following steps to check whether the cPanel interface uses custom CSS files correctly:

  1. Create a new style directory within the appropriate directory.

  2. In your preferred text editor, create a styles.css file in the new directory with the following contents:

    Code Block
    languagecss
    linenumberstrue
    body {
        background-color: blue;
    }


  3. Use your preferred method to apply the style that you just created.

    Note
    titleNote:

    To make certain that you applied the style correctly, we recommend that you apply the style through the cPanel interface. 


  4. Navigate to the cPanel interface in your browser, and perform a hard refresh.
    • On MacOS® computers, press Command+Shift+R.
    • On Windows® computers, press Ctrl+F5.
  5. Check whether the cPanel interface now displays a blue background. If it does, the styles.css file exists in the correct location, and the cPanel interface can read it correctly. 
  6. Check your CSS file for errors. If the problem persists and no errors exist in the file, you may need to submit a ticket with cPanel Technical Support.


Custom icons do not display


Section


Column
width10%

Problem:


Column

Your custom style includes custom icons, but the cPanel interface continues to display the default cPanel-provided icons, or icons from another style.



Section


Column
width10%

Solution:


Column

In most cases, this problem occurs because you did not run the /usr/local/cpanel/bin/sprite_generator utility after you applied the style. This utility integrates your icons into the cPanel interface's icon set.

To use this utility, run the following command, where mystyle represents the style name:

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

If this command does not solve the issue, confirm that you stored the icons in the correct location in your style, and that they use the correct filenames.

  • You must save icon files in the icons subdirectory within the main style directory. For example, if you created the mystyle style and applied it to all of the accounts on the server, icon files should exist in the /var/cpanel/customizations/styled/mystyle/icons/ directory.
  • To replace existing cPanel feature icons, you must use the same names and file extensions as the icons that you wish to replace. 
    • For example, to replace the File Manager feature's png icon, you must save the icon as the file_manager.png file. Or, to replace the svg format icon, save the icon as the file_manager.svg file.
    • For more information, read our Guide to cPanel Interface Customization - Appkeys documentation.

Make certain that you clear your browser's cache regularly while you troubleshoot this issue. If your browser caches the cPanel interface, you may not see the results of your changes immediately.