Controls / Editor / Appearance and Styling

New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Create a Custom Skin

RadEditor for ASP.NET AJAX CSS: Classes and Their Use

Each of the controls included in the Telerik® UI for ASP.NET AJAX suite is styled with two CSS files that are loaded in a certain order. The first one - ControlName.css, also called base stylesheet contains CSS properties and values that are common for all skins, i.e it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In the general case, when creating a custom skin for a control this file should not be edited, unless the custom skin needs different sizes, paddings or margins.

The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, i.e - Editor.Default.css. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties, and references to images, colors, borders and backgrounds.

Creating a Custom Skin for RadEditor for ASP.NET AJAX from an Existing One

Getting and Renaming Files and CSS Classes

In order to explain better the CSS classes of RadEditor, we will use both Editor.css and Editor.SkinName.css as external resources. We will modify an existing skin of RadEditor. Follow these steps to register an external skin for RadEditor for ASP.NET AJAX before editing any CSS:

  1. In your project, create a new directory named Skins

  2. In the skins folder create a new directory MyCustomSkin.

  3. Go to ~/[ControlsInstallationFolder]/Skins and copy the Common folder in your Skins folder

  4. Go to ~/[ControlsInstallationFolder]/Skins and copy Editor.css in your Skins folder

  5. Go to ~/[ControlsInstallationFolder]/Skins/Default and copy Editor.Default.css and the Skins/Default/Editor folder in your Skins folder.

    If the used Telerik® UI for ASP.NET AJAX suite includes Lite and Mobile Render Modes then it is recommended to include the corresponding skin folders (e.g. DefaultLite and DefaultMobile ) and rename them accordingly to MyCustomSkinLite and MyCustomSkinMobile

  6. Rename Editor.Default.css to Editor.MyCustomSkin.css and the folder Default to MyCustomSkin.

  7. When you are finished you should have: Skins/Editor.css, Skins/MyCustomSkin/Editor.MyCustomSkin.css and Skins/MyCustomSkin/Editor. The last folder contains the images for MyCustomSkin.

  8. In order to support multiple skins of RadEditor on a single page, the wrapping skin-specific is .SkinName, i.e .Default, which is a secondary class of the main Editor's class - .Default.RadEditor (no space between the CSS classes in the rule) so in order to create a custom skin out of the Default skin, we should rename all occurrences of "Default" in Editor.MyCustomSkin.css to "MyCustomSkin" as shown below:

    Editor CSS Classes Batch Rename

  9. Put a new server declaration of RadEditor on your page, and set Skin="MyCustomSkin" and EnableEmbeddedSkins="false":

    ASP.NET

    <telerik:RadEditor RenderMode="Lightweight" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false" ID="RadEditor1">
</telerik:RadEditor>

  10. Register Editor.css and Editor.MyCustomSkin.css in the <head>...</head> section of your web page. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM:

    ASP.NET

    <link rel="stylesheet" type="text/css" href="Skins/MyCustomSkin/Editor.MyCustomSkin.css"></link>
<%-- The Window skin file is recomeded to be imprted when the built-in dialogs are used --%>
<link rel="stylesheet" type="text/css" href="Skins/MyCustomSkin/Window.MyCustomSkin.css"></link>

    Make sure the path to the files is correct, otherwise the skin will not apply.

  11. Telerik's Editor is a complex control and makes use of other controls from the Telerik® UI for ASP.NET AJAX suite (e.g. RadWindow, RadFormDecorator, RadTabStrip, RadGrid, RadToolBar, RadFileExplorer), please, review the following two articles, and the relevant help topics about skinning these controls:

  12. Reload the page, and if the steps 0-9 have been followed correctly, you will see RadEditor running a custom Default skin set as an external resource.

Explanation of the CSS Classes in Editor.MyCustomSkin.cssThe Skin Stylesheet - Editor.MyCustomSkin.cssEach skin of RadEditor consists of two image sprites, that are contained in the Skins/SkinName/Editor folder, and they are visually explained below. These are:

  1. ToolBarSprites.gif - contains the images for the vertical toolbars and other horizontal elements

  2. ToolbarVerticalSprites.gif - contains the images for the vertical toolbars and other vertical elements

  3. Brief explanation of the CSS classes of Editor.MyCustomSkin.css. For more information please check this article.

    • .MyCustomSkin.RadEditor - wrapping class
    • .MyCustomSkin.reWrapper - wrapping class
    • .MyCustomSkin.RadEditor .reContentCell - content cell of RadEditor
    • .MyCustomSkin.reColorPicker - color picker of RadEditor
    • .MyCustomSkin.reInsertTable - Insert Table dropdown
    • .MyCustomSkin.reDropDownBody - dropdown
    • .MyCustomSkin.reCustomLinks a:hover - custom links dropdown link
    • .MyCustomSkin.reDropDownBody table - all tables in a reDropDownBody class
    • .MyCustomSkin.RadEditor .reModule - module of RadEditor
    • .MyCustomSkin.RadEditor .reEditorModes - editor modes switcher
    • .MyCustomSkin.RadEditor .reBottomZone .reModule - RadEditor module in a bottom zone
    • .reToolbar li - editor tool
    • .MyCustomSkin.reSpinBox a - spinbox
    • .reToolbar.MyCustomSkin.reSeparator - horizontal toolbar separator
    • .reToolbar.MyCustomSkin.reGrip - horizontal toolbar grip (left and right)
    • .reTool span - this is where the icon of the respective command is loaded from "Common/CommandSpritesLight|IE6.png|.gif" file
    • .reDialog .reTool - tool in a dialog
    • .reModule .reTool - tool in a module
    • .reToolbar .reTool.reTool_selected - toggled tool
    • .reToolbar .reTool_text.reTool_selected - toggled button
    • .reTool.reSplitButton - split button
    • .MyCustomSkin.reTool .split_arrow - the arrow in a split button
    • .reDialog .reTool.reSplitButton - the splitbutton used in the toolbars and in the dialogs
    • .RadEditor.MyCustomSkin.reTlbVertical li - item in a vertical toolbar
    • .RadEditor.MyCustomSkin.reTlbVertical .reToolbar.MyCustomSkin.reGrip - grip of a vertical toolbar
    • .RadEditor.MyCustomSkin.reTlbVertical .reToolbar.MyCustomSkin.grip_first - top grip of a vertical toolbar
    • .RadEditor.MyCustomSkin.reTlbVertical .reToolbar.MyCustomSkin.grip_last - bottom grip of a vertical toolbar
    • .RadEditor.MyCustomSkin.reTlbVertical .reToolbar.MyCustomSkin.reSeparator - separator of a vertical toolbar
    • .MyCustomSkintable.reSpinBox - spinbox
    • .MyCustomSkin.reSpinBoxIncrease - increase button of a spinbox
    • .MyCustomSkin.reSpinBoxDecrease - decrease button of a spinbox
    • .MyCustomSkin.reMode_selected - selected mode in editor modes switcher
    • .MyCustomSkin.reModule_domlink_selected - selected element in the DOM selector
    • .MyCustomSkin.reModule_domlink - link in the DOM inspector
    • .MyCustomSkin.reDropDownBody .reItemOver - hovered element in a dropdown of Radeditor
    • .MyCustomSkin.reCustomLinks - custom links dropdown
    • .reModule_visible_icon - visible icon in the modules selector
    • .reModule_hidden_icon - hidden icon in the modules selector
    • .reResizeCell div - resize drag handle
    • .reDialog .reTool_disabled - disabled tool

Modifying the Image Sprites to Achieve Totally New Looks for the Skin

Below are visual schemes of the image sprites that are used to skin RadEditor.

ToolBarSprites.gif

ToolbarVerticalSprites.gif

RadEditor Horizontal Sprite

CommandSprites_Explained.gif

RadEditor Vertical Sprite

RadEditor Command Sprite

Modifying the Image Sprites to Achieve Totally New Looks for the Skin

Explained below is a simple method for modifying the image sprites of RadEditor with Adobe© PhotoShop to achieve new looks without creating a new design.

  1. Drag ToolbarVerticalSprites.gif and ToolBarSprites.gif in Adobe© PhotoShop

  2. From the menu bar select Image » Mode » RGB Color to prepare the images for editing (convert from optimized Indexed Color to RGB Color):

    Convert from Indexed to RGB Color

  3. Press Set Foreground Color in PhotoShop's toolbox to invoke the color picker dialog:

    Adobe PhotoShop Toolbox

  4. Select a color that you like from the color dialog and then close it:

    Adobe PhotoShop ColorPicker

  5. Choose the first image you will modify, for example ToolBarSprites.gif, and select Image » Adjustments Hue » / Saturation to open the Hue / Saturation dialog of Adobe© PhotoShop:

    Choose Hue and Saturation

  6. Check the colorize checkbox in the Hue / Saturation dialog, and the image you have selected will be immediately colorized in the hue you have selected from the toolbox:

    Colorize

    You may then play with the Hue, Saturation and Lightness sliders to finetune or further modify the image. Make sure you memorize the values of the sliders, as you will need to add the same settings to all three images in order to achieve consistent looks

  7. Press "OK" when you are finished

  8. Select Image Image » Mode » Indexed Color to flatten the layers of the image

  9. Save and close the image

In this article
Related articles
Not finding the help you need? Improve this article