Overview

There are two ways to get to the “Edit Branding Style” page. After creating a new style through the “Create / Upload Branding” page, you are given a success page which also supplies a link to it. The second way is through clicking on “Edit This Style” in the “Available Branding Styles” listing on the “Branding Editor” page.

Using either of these ways will bring you to the “Edit Branding Style” page. On this page, you are shown two different methods to edit the style. You may choose to use the “Basic Branding Editor” or the “Advanced Branding Editor”.

Basic Branding Style Editor

The “Basic Branding Style Editor” section lists groups of images sorting by their relationship to the cPanel user interface and a style-sheet. Clicking on any of them will bring you into the actual online style editor.

• Edit Logos – Clicking on this option will bring you to the “Edit Logos” page. This page allows you to resize and drag the logo, which is located at the top of the page or upload a new one.
• Move Logo – Moving your mouse pointer over the logo will change your mouse cursor into a hand cursor, which allows you to drag the logo anywhere inside the header of the page. By default, the cPanel logo is located in the top right-hand corner of the page. You may have a different logo instead of the cPanel logo if you have changed it already. Each change is automatically written to the CSS file and saved to all of your accounts.
• Resize Logo – Moving your mouse pointer to the edges of the logo will trigger the resizing controls, these controls allow you to adjust the width and height of the logo by dragging the controls. You can drag from the corners of the logo and resize the width and height together proportionately. Each change is automatically written to the CSS file and saved to all of your accounts.
• Upload Logo – You can upload a logo in the “Upload Logo” section of the page. A reminder of the current style you are editing is provided. Your current logo is displayed here along with the ability to browse your local hard-drive for a new logo to upload. Once you find the logo you wish to upload, click on the Upload Images button to upload your logo. The logo file must be a gif, .jpg or .png and use the same file name of top-logo,gif, top-logo,jpg or top-logo,png otherwise it will not be uploaded.
• Reset – If you make any mistake such as uploading the wrong logo, the wrong size or just don’t like the version of logo you uploaded, you can revert back to the default logo by clicking on the Reset button which can be found next to the Browse… button in the “Upload Logo” section of the page.
• Edit CSS – This page also provides a link to edit the CSS file for the style you are editing. Click on Edit to switch to the “CSS Editor” page (For more info see “Edit Style Sheet“).
• Edit Icons – Clicking on this option will bring you to the “Edit Icons” page. This page allows you to change the “Main Page” icons in cPanel. A reminder of what style you are currently editing is displayed above the table that organizes the icons on this page.
• Sorting Icons – The table used to organize the “Main Page” icons can be sorted by image name, description, file name, width and height. Clicking on the columns heading for each will switch between sorting ascending and descending.
• Upload Icons – Within the table that is organizing the icons for your viewing, you can upload a replacement icon for each feature of cPanel. Click on the Browse… button, which is located next to the width and height of each icon. Clicking on this button will allow you to select a new icon to upload. The icon you upload must be named the same as the one it will be replacing. The names of each icon are listed in the table. The extension of the icon can be .gif, .jpg or .png. Your new icon(s) that you are uploading should match the dimensions of the one(s) you are replacing in the table; otherwise, some undesirable display issues may occur with the “Main Page” of cPanel.
• Reset Icons – At the end of each row that displays info about an icon, you will find a Reset button. Clicking on this will allow you to reset that icon back to the default icon for the style you are editing.
• Generate Sprites – The icons that appear on the “Main Page” of cPanel may appear to be separate icons however they are only a few images that contain a number of icons. They shift around to show what icon needs to be shown out of a large listing of icons in one image. If you need to generate a new sprite file, click on the Generate Sprites button found at the bottom of the page.
• Reset All Icons – At the bottom of the page, you are given the ability to reset all the “Main Page” icons to the default set for the style you are editing. Click on the Reset All Images Button to reset them.

Overview

There are two ways to get to the “Edit Branding Style” page. After creating a new style through the “Create / Upload Branding” page, you are given a success page which also supplies a link to it. The second way is through clicking on “Edit This Style” in the “Available Branding Styles” listing on the “Branding Editor” page.

Using either of these ways will bring you to the “Edit Branding Style” page. On this page, you are shown two different methods to edit the style. You may choose to use the “Basic Branding Editor” or the “Advanced Branding Editor”.

Overview

Clicking on this option on the “Branding Editor” page will bring you to a page that serves two functions. The ability to download branding styles for offline editing and deleting nonofficial branding styles.

Downloading Styles

• Download (System) – Indicates an “Official cPanel Style”. Clicking on this option will allow you to download the official style for offline editing. It is recommended that you rename the style before uploading it so that you are able to quickly find it in the “Available Branding Styles” listing if you are not using a custom thumbnail.
• Download (Yours) – Indicates a custom style. This can be an edited version of an official style or a style from scratch. Clicking on this option will allow you to download the custom style for offline editing. It is recommended that you keep the same name when uploading the style to avoid created another new style, unless you intend to make a new custom style based on a custom style that is already installed.

  Once the style finishes downloading, find the .tar.gz file you downloaded and expand it. The .tar.gz will expand and create a new folder named as the style you downloaded. Rename that folder to identify the new style and differentiate it from others in the listing of “Available Branding Styles” once you .tar.gz the folder and upload it. You can now edit the style by replacing or editing images, text, HTML and CSS.

Deleting Styles

You cannot delete “Official cPanel Styles”. Knowing this it should be mentioned that clicking on the “Delete Style” option would only delete the modified version of an “Official cPanel Style” (Yours). When you click on “Delete Style” you will be asked if you want to permanently delete this style. Click on Yes or No depending on your intentions.

Overview

This option on the “Branding Editor” page when clicked on will bring you to a page that serves as two functions. It gives you the ability to create a new branding style and the ability to upload a new branding style from your hard-drive that you may have created or edited offline.

Create a New Branding Style

This option allows you to create a copy of the current default style and makes it into a new style. It is then added to and listed in the “Available Branding Styles” section on the “Branding Editor” page.

Type in the name of the new style you would like to create and click on Create. You will see a success message letting you know that you just created a new style. You will be offered the ability to jump right to editing this new style online (for more info see “Editing Branding Styles Online“) at the bottom of the page reporting the success of creating this new style.

Upload a New Branding Style

This option allows you to upload an edited style or new style from your hard-drive. Once the upload is completed, the new style can be found in the listing of “Available Branding Styles” on the “Branding Editor” page.

To upload a branding style click on Browse… and navigate to where the .tar.gz file is that you archived, select it and commit to uploading the file. You will now see the path to the file on your computer in the text area next to Browse… and the file will begin uploading once you click on Upload.

NOTE: Branding styles can contain any of the images in “Edit Header and Footer Images”, “Edit Main Page Icons”, “Edit UI”, “Edit Preview Images” and a local.css style-sheet. All of these are options you will find on the “Edit Branding Style” page when editing a style online.

Any images that are not included from those sections will appear as the default images for the style. A branding style should be a .tar.gz archive containing only images with the same names as the filenames listed in each branding editor section. Branding styles must have all files in the root of the archive. Files in subdirectories will be ignored.

Overview

The Branding Editor allows you to edit many different aspects of the presentation of cPanel to your users. The best method is to create a new style and then edit it. It is recommended that you follow these steps so that you have a non-edited style to fallback to just incase something goes wrong with your new style.

Official cPanel Styles

cPanel installs with some of it’s own styles by default. Editing of the “Official cPanel Styles” on the server should always be avoided. Each time you perform an update of cPanel to the newest version, your changes will be overwritten and lost. The “Official cPanel Styles” are distributed with each new version and written to your server with each update.

Available Branding Styles

Any installed styles (whether an “Official cPanel Style” or a custom style) are listed for use on the “Branding Editor” page. The default style is [root] and will always be used if no other style is chosen.

Each installed style can have a custom thumbnail shown depicting it, however if you do not supply a thumbnail or the thumbnail is missing a default thumbnail will be used instead, thus showing a thumbnail that might not look like the actual theme in question.

Style Options

Each style has several available options that can be found in the “Available Branding Styles” list. They are as follows:

• Enable or disable style – Each style can be enabled or disabled by clicking in the checkbox below the name of the style.
• Apply to My Account – This will change the current style on your account. This will also change the style used by all of the sub-accounts under your main account.
• Apply to All Accounts – This will apply the style to all accounts already created. This will not set the default style to be used in the future for new accounts. You will still need to “Set Default for New Accounts” to apply this style for accounts created in the future.
• Set Default for New Accounts – This will set this style as the default for all new accounts created from this point on into the future. It will not set the default style for accounts that have been created in the past.
• Edit this Style – Allows the editing of the style. In the case of the “Official cPanel Styles”, it will create a copy of the style for you to edit instead of letting you edit it directly.