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 - x3 - Version 54 Documentation - cPanel Documentation
Page tree
Skip to end of metadata
Go to start of metadata

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

For cPanel & WHM 54

(Home >> Preferences >> Branding Editor)


Warning:

This document describes functionality from cPanel's deprecated x3 theme. We strongly recommend that you use cPanel's current theme (Paper Lantern) instead.

  • We removed the deprecated x3 theme from new installations in cPanel & WHM version 60.
    • Make certain that you read the appropriate documentation version for your version of cPanel & WHM.
    • For more information, read our What's My Version Number documentation.
  • cPanel's Paper Lantern theme does not include certain x3 theme-specific features.
    • For a complete list of Paper Lantern features, read our cPanel Features List documentation.
    • If you need a feature that the Paper Lantern theme does not include, submit a feature request.

 

 

Overview

This interface allows resellers to edit each theme's header and footer images, as well as the style's main page icons.

Important:

You must obtain root-level or reseller privileges to view this interface.

Create or Upload Branding

Click this option to duplicate the [root] style so that you may edit it, or upload a new style.

Duplicate a branding style

To duplicate a branding style, perform the following steps:

  1. Enter the new branding style’s name in the Name text box.
  2. Click Create. The system will duplicate the [root] style.
  3. Click one of the following options to edit the new style:
    • Go Back to Editing (style) — Return to the Edit Branding Style interface.
    • Go Back to Branding Editor — Return to the Branding Editor interface.

Upload a branding style

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

  1. Click Choose File.
  2. Select the file from your computer.

    Note:

    The fexpected file type is a tarball (.tar.gz).

  3. Click Upload.
  4. Click one of the following two options to edit the style that you uploaded:
    • Go Back to Editing (style) — Return to the Edit Branding Style interface.
    • Go Back to Branding Editor — Return to the Branding Editor interface.

Download or Delete Branding

Click this option to download a style to your local computer so that you may edit it, or delete a style.

Download a branding style

To download a branding style, click the Download link that corresponds to your preferred style. The system will download a .tar.gz file to your computer.

 

Note:

If you have never downloaded the style before, click Download (System). If you previously customized and uploaded a version of this style, select Download (Yours) to re-download this style.

 

Edit a downloaded branding style

After you download your preferred style to edit, perform the following steps:

  1. Extract the file's contents. To do this, perform 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 does not open a .tar.gz file.
    • If you use a Mac® or *nix machine, extract the .tar.gz file's contents with the tar -xvzf command.

      Note:

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

  2. Make the desired changes to your files.

    Important:

    • The images that the .tar.gz file contains must maintain the same dimensions to maintain the appearance of the style.
    • Make certain that the filenames remain the same, or the server will not place the files correctly in the interface.
    • Use appropriate and clear icons to ensure that you and your cPanel users can easily navigate the interface.
  3. Before you upload the files to the server, place them 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, compress the contents of the file into a .tar.gz file with the tar -cvzf command.

Delete a Branding Style

Note:

You cannot delete any of the styles that ship with cPanel & WHM.

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

  1. Click Delete Style next to the branding style you want to remove from your server. A new interface will appear.
  2. Click Yes to confirm that you wish to delete the style.

Branding style options

From the Branding Editor interface, you can access the several options for styles that exist on your server.

You can use these options to perform the following actions:

  • Enabled — Select this checkbox to make a style available to all of your users.
  • Apply to My Account — Click this option to use a style for your own cPanel account.
  • Apply to All Accounts — Click this option to use a style for all of your users’ accounts.

    Notes:

    • If you access the Branding Editor interface after you select a theme from WHM's x3 Branding interface (Home >> cPanel >> x3 Branding), this option only applies to accounts that use the selected theme.
    • If you are a reseller, this option only applies to accounts that you own that use the selected theme.
  • Set Default for New Accounts — Click this option to select a style as the default skin for new accounts.
  • Edit This Style — Click this option to edit a style.

Edit styles

When you edit a style, the following options appear. They allow you to edit various portions of the cPanel interface.

To change a logo, perform the following steps:

  1. Click Edit Logos.

    Note:

    Logos display in the upper portion of your cPanel interface.

  2. Click Choose File.
    • You must name the new logo with the top-logo.png filename and extension.

    • Click Reset to return to the default logo.
  3. Select the file to use as the new logo.
  4. Click Upload Images. Your logo will appear at the top of the Edit Logos interface.
  5. Select and drag the logo to the location in which you want it to appear.
  6. To resize the logo, use the handles that appear when you place the cursor over it.

    Note:

    The CSS code in the middle of the interface updates accordingly whenever you move the logo.

Change an icon

To change an icon, perform the following steps:

  1. Click Edit Icons.

    Note:

    Icons display in The cPanel Home Interface - x3 (Home). Use these icons to highlight features for your users.

  2. Click Choose File.
    • The custom icons must use the same filenames as the originals.
    • Click Reset to return to the default icon.
  3. Select the file from your computer to use as the new icon.

    Warning:

    cPanel, Inc. does not support transparent images as icons. Uploaded images lose their transparency.

  4. Click Upload Images.
    • Click Reset All Icons to return all icons to the default icons.

 

Note:

If your icon does not display properly, click Generate Sprites. This regenerates the cPanel file that contains your icons, and may fix the problem.

  • 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 generate automatically.
  • The WHM interface includes a Generate Sprites link in case the process encounters a problem. Use this link if the changes that you make to the appearance of the cPanel interface do not display automatically.

Change Headers and Footers

To change headers and footers, perform the following steps:

  1. Click Edit Header/Footer.

    Note:

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

  2. Locate the image that 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.
    • Each file also has an image number. When you click the image number, the appropriate header or footer image will blink.
  3. Click Choose File.
    • Custom headers and footers must use the same filenames as the original files.
    • Click Reset to return a header or footer to its default.
  4. Select the file to use as an icon from your computer.
  5. Click Upload Images at the bottom of the interface.
    • Click Reset All Icons to return to the default headers and footers.
    • Click Generate Sprites if your image does not display properly.

Edit a User's GUI

To change the general appearance of the user interface, perform the following steps:

  1. Click Edit UI.
    • These images exist in many places in the interface and include borders and buttons.
    • Make certain to examine each picture and description to ensure that you replace the correct files.
  2. Click Choose File.
    • Custom images must use the same filenames as the original files.
    • Click Reset to return an image to its default.
  3. Select the file to use as an icon.
  4. Click Upload Images at the bottom of the page.
    • Click Reset All Icons to return to the default images.
    • Click Generate Sprites if your image does not display properly.

Change a Style's Preview Image

To change the appearance of the preview image for the style, perform the following steps:

  1. Click Edit Preview Images.
    • The small preview image displays in the Branding Editor interface.
    • The large preview image displays when a user clicks the small image in the Branding Editor interface.
  2. Click Choose File for the large preview image.
    • We recommend that you select a screenshot of the style.
    • Custom screenshots must use the same filenames as the original images.
    • Click Reset to return to the default preview image.

  3. Repeat this process for the small preview image.
  4. Click Upload Images at the bottom of the interface.
    • Click Reset All Previews to return both preview images to the defaults.

Edit a Style's HTML

When you edit a style's HTML directly, you can use cPanel's HTML Editor - x3 interface (Home >> Files >> HTML Editor) or you can upload your own custom .html file.

Use cPanel's HTML Editor

To edit the style’s HTML pages in cPanel's HTML Editor interface, perform the following steps:

  1. Click the Edit HTML Pages link.
  2. Click Edit to edit the HTML in the editor.
    • Click Revert to undo any changes that you make in the editor.
    • For more information about how to use this interface, read our HTML Editor - x3 documentation.
  3. Click Save to store the changes that you make with the editor.
    • Click Reset to return the HTML file to the default.
    • Right-click the HTML file’s name to download it and edit it in a text editor.

Upload Your Custom HTML page

To upload a custom .html file, perform the following steps:

  1. Click Choose File for the file to replace.
  2. Navigate to and select the .html file to upload.
  3. Click Upload Pages at the bottom of the interface.
    • Click Reset to return the HTML file to the default.
    • Right-click the HTML file’s name to download it and edit it in a text editor.

Warning:

If you do not use an UTF-8 language, do not use it when you create your HTML pages. UTF-8 language data results in a corrupted page. For more information, read our Guide to Locales - Why You Should Use UTF-8 documentation.

Edit a Style's CSS

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

  1. Click Edit Style Sheet.
  2. Make your changes or additions in the CSS editor text box.
  3. Click Save CSS to store the changes.
    • Click Revert to return the style sheet to its default.

Warning:

If you do not use an UTF-8 language, do not to use it when you create your HTML pages. UTF-8 language data results in a corrupted page.

Example branded login page

Consider the following example of a branded login page:

 Click here to expand this example...
<?php
#Login Configuration

#cPanel
$protocol = 'http';
$port = 2082;

#Secure cPanel
#$protocol = 'https';
#$port = 2083;

#WHM
#$protocol = 'http';
#$port = 2086;

#Secure WHM
#$protocol = 'https';
#$port = 2087;

#Webmail
#$protocol = 'http';
#$port = 2095;

#Secure Webmail
#$protocol = 'https';
#$port = 2096;
?>

<html>
<h1>[Web Hosting Company Name Here]</h1>

<b>cPanel Login</b><br>

<?php
if ($_GET['failed'] == "1") {
?>
<font color=#FF0000>Your login attempt failed!</font>
<?php
}
print "<form action=\"" . $protocol . "://" . $_SERVER['HTTP_HOST'] . ":" . $port . "/login/\" 
method=POST>";
?>
User: <input type="text" name="user"><br>
Pass: <input type="password" name="pass"><br>
<?php
print "<input type=hidden name=failurl value=\"http://" . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . "?failed=1\">";
?>
<input type="hidden" name="login_theme" value="default">
<input type="submit" value="Login">
</form><br>
<a href="cpanel-login.phps">Source</a><br>
Note: This examples requires cPanel 9.4.1 or later!
The login theme option requests cPanel 11.1.0 or later!
</html>