Modifying the Files

After you obtained the package archive, you need to extract its contents into a directory, and make the desired changes to the files. Otherwise, you can install the downloaded skin package on the server as is (as described in Installing Skins to Plesk) and then modify the files directly on the server.

Important: If you choose this way, be sure to set the skin information as described in the section Editing the Skin Information below before installing the skin.

Skin Package Structure

The following table explains the structure and contents of the directories and files contained within a skin package.

Note: To help you easily determine the styles or image files you need to change, we recommend using web development tools, such as, for example, Firebug for Mozilla Firefox, or Inspect Elements for Google Chrome. By using these tools, you can select an interface element and learn which styles are applied to it, in which file and line in that file they are defined.

 

css

The custom.css file located in this directory is empty, when you download the skin package. All styles are defined in the file contained in the Plesk theme that cannot be changed. However if you want to re-define a style of some interface element, you can add a style definition to the downloaded custom.css file and then upload it to Plesk. In this case, only the style you have defined will be applied to the particular element, the other elements will remain unchanged.

You can add style definitions for page background, main fonts, text colors, colors of hyperlinks, border colors for form elements, and so on.

icons

This directory contains only the icons which are placed in sub-directories by their size. Note that the double icon size is used for support of Retina displays.

If you do not plan to customize any of these items, you can remove them from the archive with your custom skin. You can leave only the items that you changed or added.

images

This directory contains images that are used as background fillers for some interface elements.

Some of these graphic files are sprite sheets that consist of several images that are used in several different places of the product interface. For this reason, when changing a background image, make sure that the corresponding file is not used elsewhere. It is better to create a new graphics file and change the style sheets to use it, instead of merely replacing the file.

If you do not plan to customize any of these items, you can remove them from the archive with your custom skin. You can leave only the items that you changed or added.

 

logos

This directory contains the company and the product logo images shown in Plesk. To change a logo, prepare the file with the same name and replace it in the folder.

meta.xml

This file contains the information about the skin package, such as its name and description.

When you need to revert your changes and use the default styles or images, just delete your custom CSS definitions from the custom.css file and remove the custom images from the /images/ and /images/logos/ directories of your custom skin.

Editing the Skin Information

To edit you skin information:

Open the file meta.xml and specify the following properties:

  • name. Set the name you will use to refer to this skin. Use only latin characters and the minus sign ('-') in the name.
  • description. Provide a brief description of the skin.
  • version. Specify the skin version.
  • vendor. The name of your company or your name.
 

Leave your comments on this page

Leave your feedback or question on this documentation topic below. For technical assistance, contact your hosting service provider or submit a request to Plesk support. Suggest new features for Plesk here. Discuss general questions on the Plesk forum. All offtopic comments will be removed.