Our documentation is getting an overhaul! We would like your input! Click here to take a look at the beta launch of our new documentation site! Only cPanel & WHM version 82 documentation exists on our beta at this time. 84 will be added to the new site soon! Leave your feedback here: https://go.cpanel.net/docsfeedback
Branding Editor - 11.42 Documentation - cPanel Documentation
Page tree
Skip to end of metadata
Go to start of metadata

This document is for a previous release of cPanel & WHM. To view our latest documentation, visit our Home page.

For cPanel & WHM 11.42

(Home >> Preferences >> Branding Editor)

Overview

This feature allows you to edit the header and footer images in each theme as well as the main page icons for the style.

At the top of the interface, two options appear:

  • Create or Upload Branding — This button allows you to either duplicate the root style so that you may edit it, or to upload a new style that you have created.
  • Download or Delete Branding — This button allows you to download a style to your local computer so that you may edit it, or to delete a style.

 


The top of the Branding Editor interface.

Duplicate a branding style

To duplicate a branding style, perform the following steps:

1. Click Create or Upload Branding on the first page of the Branding Editor interface.

2. Enter the new branding style’s name in the Name text box.

  • This feature will duplicate the default branding style so that you may download or edit it, but not damage the original.

 


The "Create a new branding style" option.

3. Click Create.

  • WHM will duplicate the root style.

4. You may now click one of two options to edit the style that you just created:

  • Go Back to Editing (style) — Returns you to the Edit Branding Style interface, where you can brand the theme with your own logos, headings, etc.
  • Go Back to Branding Editor — Returns you back to the Branding Editor home interface.

 

Download a branding style

To download a branding style, perform the following steps:

1. Click Download or Delete Branding.

2. Click the Download link next to the style you wish to download.

  • If you have never downloaded the style before, click Download (System). If you have already customized and uploaded a version of this style, you will have the option to select Download (Yours) to re-download this style.
  • *.tar.gz file will download to your computer.

 


The "Download/delete branding style" interface.

 

Edit a branding style

After you download the style that you wish to edit, perform the following step:

1. Extract the contents of the file. To accomplish this, do one of the following actions:

  • If you use a Windows® machine, download a program (for example, winRAR) to extract the contents of the file. By default, Windows will not open a .tar.gz file.
  • If you use a Mac® or *nix machine, use the tar -xvzf command from the command line interface to extract the contents of the .tar.gz file. You may also open it with an extraction program.

2. Make the desired changes to your files.

Remember:

  • The size of the pictures that are contained within the .tar.gz file must stay the same to maintain the appearance of the style.
  • You will need to leave the filenames the same, or the server will not know where to place the files in the interface.

3. Before you upload the files to the server, place them back in a .tar.gz file.

  • On a Windows machine, use the same program that you used to extract the original file contents to place the new content in a .tar.gz file.
  • On a *nix machine, you may use the tar -cvzf command or compress the contents of the file back into a .tar.gz file with compression software.

Note:

For more information on the tar command, run the man tar command from the command line interface.

Upload a branding style

To upload a new branding style, perform the following steps:

1. Click Create or Upload Branding on the first page.

2. Click the Choose File button.

 


The "Upload a new branding style" option.

3. Select the file from your computer.

  • The expected file type is a tarball (.tar.gz).

4. Click Upload.

5. You may now click one of two options to edit the style you just uploaded.

  • Go Back to Editing (style) — Takes you to the Edit Branding Style interface where you can brand the theme with your own logos, headings, etc.
  • Go Back to Branding Editor — Takes you back to the Branding Editor home interface.

 


Options after you upload a style.

 

Delete a branding style

To delete a branding style that you have uploaded, perform the following steps:

1. Click Download or Delete Branding on the first page.

2. Click Delete Style next to the branding style you would like to remove from your server.

3. To confirm that you would like to remove the style, click Yes on the following page.

  • Click No to keep the style.

Note:

You cannot delete the Root (default) style installed with cPanel.

 


The "Download/delete branding style" interface.

 

The Branding Editor home interface

The Branding Editor home interface also has a number of options for existing styles on your server. You may access a list of four options below each style on your server and one box above the style.

 


Options available per-style on the Branding Editor screen.

 

You can use these options to perform the following actions:

  • To make a style available to users, select the Enabled box above the style.
  • To use a style for your own cPanel account, click Apply to My Account.
  • To use a style for all of your users’ accounts, click Apply to All Accounts.
    • If you accessed this Branding Editor after you selected a theme from the WHM Branding interface, this option only applies to accounts that use the selected theme.
    • If you are a reseller, this option only applies to accounts you own that use the selected theme.
    • For additional information about branding cPanel as root or a reseller, see our Advanced Guide to Branding.
  • To select a style as the default skin for new accounts, click Set Default for New Accounts.
  • To edit a style, click Edit This Style.

 


The "Edit This Style" interface.

When you select this option, you are presented with the following options that allow you to edit various parts of the cPanel interface:

  • Edit Logos
  • Edit Icons
  • Edit Header/Footer
  • Edit UI (user interface)
  • Edit Preview Images
  • Edit HTML Pages
  • Edit Style-sheet

To change a logo, perform the following steps:

1. Click Edit Logos. cPanel will display the Edit Logos interface.

  • Logos are located in the upper portion of your cPanel interface.

 


The "Edit Logos" interface.

2. Click the Choose File button.

  • The new logo must be named top-logo.png.
  • You may click Reset to return to the default logo.

3. Select the file from your computer that you would like to use as the new logo.

4. Click Upload Images.

5. Your logo will now appear at the top of the Edit Logos interface.

  • Select and drag the logo to the location where you want it to appear.
  • Resize the logo using the handles that appear when you place the cursor over it.
  • The CSS code in the middle of the interface will update accordingly whenever you move the logo. From here, you can cut and paste it into the Edit Style-sheet interface (click the edit link to access this interface).

 


After you upload the logo, click it in the header to resize or move it.

 

Change an icon

To change an icon, perform the following steps:

1. Click Edit Icons.

  • Icons are located on the main interface of the cPanel interface. They are used to highlight features for your users.

Remember:

Use appropriate and clear icons to ensure that you and your cPanel users can easily navigate the interface.



The top of the "Main Page Icons" interface.

2. Click the Choose File button.

  • The custom icons must have the same filenames as the originals.
  • You may click Reset to return to the default icon.

3. Select the file you wish to use as an icon from your computer.

Warning:

cPanel does not currently support transparent images as icons. Uploaded images will lose their transparency.

 


The bottom of the "Edit Index Page Icons" interface.

4. At the bottom of the interface, click Upload Images.

  • You may click Reset All Icons to return all icons to the default icons.
  • You may click Generate Sprites if your icon is not displayed properly. This will regenerate the cPanel file that contains your icon(s), and may fix the problem.

 

More about sprites

To allow you to conserve bandwidth and improve performance, sprites reduce the number of requests to your web server. To do this, they store all of your buttons and icons in a single image. When you upload an image, the sprites should be generated automatically.

However, the WHM interface contains a Generate Sprites link in case the process encounters a problem. The link is intended as a fail-safe and should be used if the changes you have made to the appearance of the cPanel interface do not take automatically.

Change headers and footers

To change headers and footers, perform the following steps:

1. Click Edit Header/Footer.

  • Headers and footers are located at the top and bottom of the cPanel interface and often serve as consistent links to commonly accessed sections of the interface.

 


The top of the "Header and Footer" interface.

2. Locate the image you wish to replace.

  • Red numbers appear in the header and footer of the page. When you click a number, the appropriate file will blink.
  • Likewise, each file has a clickable image number. When you click the number, the appropriate header or footer image will blink.

3. Click the Choose File button.

  • The custom headers or footers must have the same filenames as the originals.
  • You may click Reset to return a header or footer to its default.

4. Select the file you would like to use as an icon from your computer.

 


The bottom of the "Header and Footer" interface.

5. Click Upload Images at the bottom of the interface.

    • You may click Reset All Icons to return to the default headers and footers.
    • You may click Generate Sprites if your image is not displayed properly. This will regenerate the cPanel file that contain your image(s) and may fix the problem.

 

Edit a user's interface

To change the general appearance of the user interface:

1. Click Edit UI

  • These images are located in many places in the interface and include borders and buttons.
  • Take care to examine each picture and description to ensure that you are replacing the right files.

 


The top of the "Edit UI Images" interface.

2. Click the Choose File button.

  • The custom images must have the same filenames as the originals.
  • You may click Reset to return to the default interface appearance.

3. Select the file you would like to use as an icon.

 


The bottom of the "Edit UI Images" interface.

4. Click Upload Images at the bottom of the page.

  • You may click Reset All Icons to return to the default interface appearance.
  • You may click Generate Sprites if your image is not displayed properly. This will regenerate the cPanel file that contain your image(s), and may fix the problem.

Change a style's preview image

To change how the preview image for the style will appear in the cPanel Branding Editor, perform the following steps:

1. Click Edit Preview Images.

  • You are able to replace one of two preview images: the large image or the small image.
  • The small image is displayed on the home interface of the Branding Editor.

 


The top of the "Edit Preview Images" interface.

2. The large image is displayed when a user clicks the small image on the home interface of the Branding Editor.

3. Click the Choose File button.

  • You should select a screenshot of the style, as this will be most clear to your users when they select a preferred interface.
  • The custom screenshots must have the same filenames as the originals.
  • You may click Reset to use the default preview image.

Remember:

You need to repeat this process for both the large and small preview images.

 


The bottom of the "Edit Preview Images" interface.

4. Click Upload Images at the bottom of the interface.

  • You may click Reset All Previews to return both preview images to the defaults.

 

Edit a style's HTML

You have two options when you edit a style's HTML directly: you can use the cPanel HTML editor, or upload your own custom *.html file.

Use cPanel's HTML Editor

To edit the style’s HTML pages:

1. Click the Edit HTML Pages link.

 


The top of the "Edit HTML Pages" interface.

2. Click Edit to edit the HTML in the editor.

  • You may click Revert to undo any changes you have made in the editor.

 


The HTML editor.

3. Click Save to store the changes you have made with the editor.

  • You may click Reset to return the HTML page to the default.
  • You may right-click the HTML file’s name to download it to your computer for editing in a text editor.

Upload your custom HTML page

Alternatively, you can upload a custom HTML page:

1. Click the Choose File button next to the file you wish to replace, and navigating to the *.html file you wish to upload.

 


The bottom of the "Edit HTML Pages" interface.

2. Click Upload Pages at the bottom of the interface.

  • You may click Reset to return the HTML page to the default.
  • You may right-click the HTML file’s name to download it to your computer for editing in a text editor.

Warning:

If you do not use an UTF-8 language, you should take special care not to use it when you create your HTML pages. UTF-8 language data will result in a corrupted page.

Edit a style's CSS

To edit the style’s cascading style sheet (CSS), perform the following steps:

1. Click the Edit Style Sheet link.

 


The "Edit Style Sheet" interface.

2. Make any changes or additions in the CSS editor text box.

3. Click Save CSS to store the changes.

  • You may click Revert to return the style sheet to its default.

Warning:

If you do not use an UTF-8 language, you should take special care not to use it when you create your HTML pages. UTF-8 language data will result in a corrupted page.