Introduction

This document is a guide to creating and installing skins - custom interface appearance styles - for Plesk Sitebuilder. This document is intended for developers using Plesk Sitebuilder SDK.

Here you can find the structure of skin directories as well as its contents description, instructions on how to create your own custom skin and how to install it and make it available on your server.

What Is a Skin?

In Plesk Sitebuilder, a skin is in fact a set of CSS, .skin and image files. The CSS and skin files define the style of the Plesk Sitebuilder interface elements; the image files are the Plesk Sitebuilder interface icons, logotype images and other pictures used in CSS and .skin files. All these files, placed in corresponding sub-directories, compose the structure of the skin directory.

Skins are an easy and flexible way to diversify your user interface appearance. Using skins, you can change the colors of the interface areas, set new fonts properties, use different images for icons in the interface, etc. It takes only a few clicks to replace one skin with another. Different skins can be used by different users at one server.

Files That Compose Skin

Each skin directory contains the sub-directories and files described below.

CSS file:

• style.css

  The style.css file contains style settings common for all the interface elements.

Each interface area has the following .skin files describing its appearance:

• Form.skin

  The Form.skin file contains settings that define the appearance of forms.

• GridView.skin

  The GridView.skin file contains settings that define the appearance grids.

• HyperLink.skin

  The HyperLink.skin file contains settings that define the appearance of hyperlinks.

• IconButton.skin

  The IconButton.skin file contains settings that define the appearance of clickable icons.

• Image.skin

  The Image.skin file contains settings that define the appearance of images.

• ImageButton.skin, SBImageButton.skin

  The ImageButton.skin and SBImageButton.skin files contain settings that define the appearance of clickable images.

• ImagePreviewItem.skin

  The ImagePreviewItem.skin file contains settings that define the appearance of preview images.

• InputControls.skin

  The InputControls.skin file contains settings that define the appearance of user input controls.

• Label.skin

  The Label.skin file contains settings that define the appearance of labels.

• LinkButton.skin

  The LinkButton.skin file contains settings that define the appearance of control hyperlinks.

• LoginControls.skin

  The LoginControls.skin file contains settings that define the appearance of login elements.

• Pager.skin

  The Pager.skin file contains settings that define the appearance of page navigation elements.

• Panel.skin, SBPanel.skin

  The Panel.skin and SBPanel.skin files contain settings that define the appearance of modal box panel elements.

• Preloader.skin

  The Preloader.skin file contains settings that define the appearance of preloader elements.

• ProgressBar.skin

  The ProgressBar.skin file contains settings that define the appearance of progress bar.

• RadComboBox.skin

  The RadComboBox.skin file contains settings that define the appearance of RadComboBox elements.

• RadEditor.skin

  The RadEditor.skin file contains settings that define the appearance of RadEditor elements.

• RadTabStrip.skin

  The RadTabStrip.skin file contains settings that define the appearance of RadTabStrip elements.

• RadTreeView.skin

  The RadTreeView.skin file contains settings that define the appearance of RadTreeView elements.

• RepeaterTable.skin

  The RepeaterTable.skin file contains settings that define the appearance of table rows.

• SiteMapPath.skin

  The SiteMapPath.skin file contains style settings that define the appearance of SiteMap path elements.

• StatusBar.skin

  The StatusBar.skin file contains settings that define the appearance of status bar.

• Table.skin

  The Table.skin file contains settings that define the appearance of tables.

• ValidationController.skin

  The ValidationController.skin file contains settings that define the appearance of ValidationController elements.

• Validators.skin

  The Validators.skin file contains settings that define the appearance of Validators elements.

Metadata file:

• info.xml

The info.xml file contains general information about a skin.

Image files:

Image files are stored in the following directories:

• Icons\ contains image files required for the user interface (state/status icons, list operations, etc.)
• Images\ contains image files specific for a certain skin and used for customizing its elements. The set of these images can be individual for every skin. The links to these images are specified in the CSS files.