Skinning
In this version of RadEditor the term "Skin"
is used to replace the old "Scheme". Also the Scheme
property is now deprecated and you should use the Skin property
instead.
The introduction of CSS-based skinning facilitates centralized and easy
customization of the toolbar and dialogs through Skins.
Each Skin is located in an individual subfolder of the
"\RadControls\Editor\Skins" folder and contains the following elements:
-
"\Buttons" folder- the folder where all images related to the buttons of the
toolbar are stored.
- "\CssImg" folder - the folder where all images used in the two CSS files are
stored.
- "\Dialogs" folder - the folder where all images related to the dialog boxes are
stored.
- "\Img" folder - the folder where all other images used by the editor are
stored.
- Dialogs.css - the file, which defines the styles for the dialog elements: text,
label, button, etc.
-
Editor.css - the file, which defines the styles for all general elements:
textarea, toolbar, separators, etc.
The fastest way to get started with your own custom skin is by modifying an
existing skin. By default the RadEditor skins are located
in ~/RadControls/Editor/Skins. From
http://www.telerik.com/skins
, you can download all resources necessary to deploy or modify selected skins
for the telerik components. Each skin archive contains the images, css, and
aspx declaration needed to apply a skin in your project, as well as the
original Adobe Photoshop .psd source file you will need to modify the design.
Follow the instructions below:
- Duplicate the folder of an existing Skin (e.g. "Default") to a new folder and
give it a new name (e.g. "MyOwnSkin").
- Modify the CSS files and/or images located in
"\RadControls\Editor\Skins\MyOwnSkin". For more details, please refer to the
Readme file in the skin archive.
- Set the "Skin" property of the respective
RadEditor instances to point to the new Skin.
If you experience some discrepancies in the skin visualization when migrating
from IE6 to IE7, visit the knowledge base article below along with the resource
linked at the bottom of it:
Migration
from IE6 to IE7