Modifying the Files

After you have 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 theme package on the server as is (as described in Installing Themes to Plesk) and then modify the files directly on the server.

Note

If you choose this way, be sure to set the theme information as described in the section Editing the Theme Information below before installing the theme.

Theme Package Structure

The following table explains the structure and contents of the directories and files contained within a theme 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.

image-25890.gif css  

The custom.css file located in this directory is empty, when you download the theme 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.
image-25890.gif 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 theme. You can leave only the items that you changed or added.
image-25890.gif 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 theme. You can leave only the items that you changed or added.
  image-25890.gif 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.
image-38607.png meta.xml   This file contains the information about the theme 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 theme.

Editing the Theme Information

To edit your theme information:

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

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