RadEditor for ASP.NET AJAX

RadControls for ASP.NET AJAX

In the Q2 2008 release we have introduced a new editor property named DialogCssProperty which is useful in scenarios when a custom skin is used. It allows you to include your custom skin CSS in the editor dialogs. Please, review bellow how to achieve the desired behavior:

  1. Set the EnableEmbeddedSkins property to false

  2. Place the editor's Skins folder within your web application - the Skins folder can be found in the RadControls for ASP.NET AJAX installation folder.

  3. Choose the desired skin and set the editor's Skin property to point to it e.g. Skin = "Default"

  4. Add manually to the page's head the following CSS files:

    CopyXML
    <link href="Skins/Window.css" rel="stylesheet" type="text/css" /> 
    <link href="Skins/Editor.css" rel="stylesheet" type="text/css" /> 
    <link href="Skins/<CurrentSkin>/Window.<CurrentSkin>.css" rel="stylesheet" type="text/css" /> 
    <link href="Skins/<CurrentSkin>/Editor.<CurrentSkin>.css" rel="stylesheet" type="text/css" />
  5. Create new CSS file e.g. DialogCSS.css and put in it references to the following CSS files which will style the different Telerik controls in the editor dialogs:

    CopyXML
    @import url('../ToolBar.css');
    @import url('../FormDecorator.css');
    @import url('../TabStrip.css');
    @import url('../Editor.css');
    @import url('../TreeView.css');
    @import url('../Splitter.css');
    @import url('../Slider.css');
    @import url('../Upload.css');
    @import url('../Window.css');
    @import url('../Grid.css');
    @import url('../Widgets.css');
    @import url('../FileExplorer.css');
    @import url('../Menu.css');
    
    @import url("Ajax.<CurrentSkin>.css");
    @import url("ColorPicker.<CurrentSkin>.css");
    @import url("ComboBox.<CurrentSkin>.css");
    @import url("Dock.<CurrentSkin>.css");
    @import url("FormDecorator.<CurrentSkin>.css");
    @import url("Grid.<CurrentSkin>.css");
    @import url("Input.<CurrentSkin>.css");
    @import url("Menu.<CurrentSkin>.css");
    @import url("PanelBar.<CurrentSkin>.css");
    @import url("Rotator.<CurrentSkin>.css");
    @import url("Slider.<CurrentSkin>.css");
    @import url("Spell.<CurrentSkin>.css");
    @import url("Splitter.<CurrentSkin>.css");
    @import url("TabStrip.<CurrentSkin>.css");
    @import url("ToolBar.<CurrentSkin>.css");
    @import url("TreeView.<CurrentSkin>.css");
    @import url("Upload.<CurrentSkin>.css");
    @import url("Window.<CurrentSkin>.css");
    @import url("Widgets.<CurrentSkin>.css");
  6. Set the editor's DialogsCssFile property to point to the DialogCSS.css e.g. DialogsCssFile="~/Skins/Default/DialogCSS.css"