Knowledgebase

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 page, 2 options appear:

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

The top of the Branding Editor screen.

Duplicate a branding style

To duplicate a branding style:

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

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

• This feature will duplicate the default branding style so that you may download or edit it without damaging the original.

The "Create a new branding style" option.

3. Click Create.

• WHM will duplicate the root style.

4. You may now click 1 of 2 options to edit the style you just created:

• Go Back to Editing (style) — Returns you to the Edit Branding Style screen 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 screen.

Download a branding style

To download a branding style:

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

2. Click the Download link next to the style you would like 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.
• A *.tar.gz file will download to your computer.

The "Download/delete branding style" screen.

Edit a branding style

Once you have downloaded the style you would like to edit:

1. Extract the contents of the file. To accomplish this:

• If you are using a Windows® machine, you will need to download a program (such as winRAR) to extract the contents of the file. By default, Windows will not handle a .tar.gz file.
• If you are running a Mac® or *nix machine, you may use the tar -xvzf command from the CLI to extract the contents of the.tar.gz file, or you may simply open it with whatever extraction program you prefer.

2. Change the files to your liking.

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

3. Before uploading the files to the server, place them back into a .tar.gz file.

• On a Windows machine, use the same program you used to extract the contents to replace 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 whatever compression software you choose.

 Note: For more information on the tar command, consult the man pages by typing man tar into the CLI.

Upload a Branding Style

To upload a new branding style:

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 1 of 2 options to edit the style you just uploaded.

• Go Back to Editing (style) — Takes you to the Edit Branding Style screen 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 screen.

Options after uploading a style.

Delete a Branding Style

To delete a branding style that you have uploaded:

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. Confirm that you would like to remove the style by clicking Yes on the following page.

• Click No to keep the style.

 Note: You will not be able to delete the Root (default) style installed with cPanel.

The "Download/delete branding style" screen.

The Branding Editor Home Screen

The Branding Editor home screen also has a number of options for existing styles on your server. You may access a list of 4 options below each style on your server and 1 checkbox above the style.

Options available per-style on the Branding Editor screen.

Using these options:

• To make a style available to users, click the Enabled checkbox 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 by selecting a theme from the WHM Branding screen, then 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 Branding Guide.
• 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" screen.

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

Change a Logo

To change a logo:

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

• Logos are located in the upper portion of your cPanel interface. Use the picture on the screen for reference.

The "Edit Logos" screen.

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 screen.

• 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 screen will update accordingly whenever you move the logo. From here, you can cut and paste it into the Edit Style-sheet screen (click the edit link to access this screen).

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

Change an Icon

To change an icon:

1. Click Edit Icons.

• Icons are located on the main screen 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" screen.

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" screen.

4. At the bottom of the screen, 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

Sprites allow you to conserve bandwidth and improve performance by reducing the number of requests to your web server. They do this by storing 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:

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" screen.

2. Locate the image you wish to replace. To assist you in finding the correct image:

• Red numbers appear in the header and footer of the page. When you click a number, the corresponding file will blink.
• Likewise, each file has a clickable image number. When you click the number, the corresponding 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" screen.

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

• • 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 containing your image(s) and may fix the problem.

Edit a User's GUI

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" screen.

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" screen.

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 containing 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:

1. Click Edit Preview Images.

• You are able to replace 1 of 2 preview images: the large image or the small image.
• The small image is displayed on the home screen of the Branding Editor.

The top of the "Edit Preview Images" screen.

2. The large image is displayed when a user clicks the small image on the home screen 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 selecting 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" screen.

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

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

Edit a Style's HTML

You have 2 options for editing 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" screen.

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" screen.

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

• 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 are not using a UTF-8 language, you should take special care not to use it when creating your HTML pages. Using UTF-8 language data in this case will result in a corrupted page.

Edit a Style's CSS

To edit the style’s cascading style sheet (CSS):

1. Click the Edit Style Sheet link.

The "Edit Style Sheet" screen.

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

3. Click Save CSS to store the changes.

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

 Warning: If you are not using a UTF-8 language, you should take special care not to use it when creating your CSS pages. Using UTF-8 language data in this case will result in a corrupted page.