USING CUSTOM PLESK SKINS > Introduction

Files That Compose a Skin

custom.css and layout.css

Each interface area has the corresponding two CSS files describing its appearance:

  • custom.css contains selectors for visual properties (color, font, etc.) of the user interface elements
  • layout.css contains selectors that define the layout of the user interface elements

NOTE

The option of modifying layout.css is recommended only for the advanced CSS designers.

The custom.css and layout.css in the help/ directory within the skin directory define the appearance of the Help pages.

buttons.css

Additionally the main area uses file buttons.css, which defines the appearance of certain buttons in the user interface. For example, in the XP-skins it defines what images are used for the icons in the Tools groups.

This file is not a requirement and is not needed if the appearance of multiple buttons is not redefined in the skin. buttons.css is addressed from main/custom.css, its contents were separated only for the sake of ease of use.

general.css

The file general.css contains style settings general for all interface elements. The style specified here will be applied when displaying an interface element unless it was specifically redefined for the corresponding area of the user interface.

tabs.css

The file tabs.css contains style settings, which define appearance of tab elements.

info.xml

When you access the Skin Properties page within the Skins repository in Plesk, it displays the information on skin, such as author's name, creation date, screenshots and descriptions. This information is stored in the info.xml file, which is located in the skin directory. The thumbnails and screenshots are stored in the screenshots/ directory.

Image files

Image files are stored in three directories:

  • icons/ contains image files required for the user interface (state/status icons, list operations, etc.)
  • images/ contains image files used with the specific skin for customizing elements, set of these can be different for different skins. Links to these images are provided in the CSS files
  • screenshots/ contains control panel screenshots and thumbnails.


to top