RadEditor Q3 2008 Skins Available for Download

[Telerik Admin]

Hello,

Please find attached all RadEditor's skins that were embedded in the Q3 2008 RadControls version. They have been adapted to be fully compatible with the Q1 2009 release. The archive also contains all other RadControls skins that were adapted for Q1

In order to use them as non embedded skins for RadEditor, you should do the following:

1. Add the base and skin's specific CSS files for the RadEditor and RadWindow controls to the head section of your page:
   

   <link href="Skins/Editor.css" rel="stylesheet" type="text/css" />
   <link href="Skins/Window.css" rel="stylesheet" type="text/css" />
   <link href="Skins/Default/Editor.Default.css" rel="stylesheet" type="text/css" />
   <link href="Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />

2. Disable the embedded skins for the RadEditor control and the embedded base stylesheet.
3. Set the Skin property of the RadEditor to the name of the skin that you want to use.
4. Set the DialogCssFile property of RadEditor to the Widgets stylesheet for the corresponding skin

e.g.

DialogsCssFile="Skins/Default/Widgets.Default.css"
EnableEmbeddedSkins="false"
EnableEmbeddedBaseStylesheet="false"
Skin="Default"

Important:
RadEditor is a complex control that uses other RadControls in its dialogs. To ensure that the dialogs will be styled properly, you should also use the files for the corresponding skins of the following controls:

• RadToolBar
• RadFormDecorator
• RadTabStrip
• RadEditor
• RadTreeView
• RadSplitter
• RadSlider
• RadUpload
• RadWindow
• RadGrid
• RadWidgets
• RadFileExplorer
• RadMenu
  

The files in the main Skin's folder must also be present in order for the control to work properly.

[Michael Hennessy]

For Q1 2009 In certain scenarios (like a dynamically shown Editor in MultiView in FireFox) there will be issues with dialog styling and the workaround is to point the DialogsCssFile to a css file (in my case located in the Office2007 skin folder) with the following content:

@import url("Widgets.Office2007.css");
@import url("ToolBar.Office2007.css");
@import url("FormDecorator.Office2007.css");
@import url("TabStrip.Office2007.css");
@import url("Editor.Office2007.css");
@import url("TreeView.Office2007.css");
@import url("Splitter.Office2007.css");
@import url("Grid.Office2007.css");

And do not set the EnableEmbeddedBaseStylesheet prooperty to 'false' like this article is sudgesting.

[Georgi Tunev]

Hello Michael,

Actually, the Widgets.<skin_name>.css file contains these imports. Here is the Widgets.Offise2007.css content:

@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');/*This should have been imported automatically!*/
@import url('../FileExplorer.css');
@import url('../Menu.css');

@import url('ToolBar.Office2007.css');
@import url('FormDecorator.Office2007.css');
@import url('TabStrip.Office2007.css');
@import url('Editor.Office2007.css');
@import url('TreeView.Office2007.css');
@import url('Splitter.Office2007.css');
@import url('Slider.Office2007.css');
@import url('Upload.Office2007.css');
@import url('Window.Office2007.css');
@import url('Grid.Office2007.css');
@import url('Menu.Office2007.css');

That is why the DialogCssFile property points to the corresponding widgets css in the skin's folder.
As for EnableEmbeddedBaseStyleSheet property, it simply sets whether the embedded base stylesheet for RadWindow and RadEditor will be used. If it is set to false, you need to import the base stylesheets manually in the page:

<link href="Skins/Editor.css" rel="stylesheet" type="text/css" />
<link href="Skins/Window.css" rel="stylesheet" type="text/css" />

I hope this information helps. If you still experience problems, please open a support ticket and send us a small sample project where they could be reproduced - we will check it and do our best to help.

Regards,
Georgi Tunev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Peichung]

The WebBlue skin doesn't work:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>RadEditor 2008.Q3 skins: Direct skin registration</title>
    <!-- This example shows registration of the Default skin -->
<link href="Skins/Editor.css" rel="stylesheet" type="text/css" />
<link href="Skins/Window.css" rel="stylesheet" type="text/css" />
<link href="Skins/WebBlue/Editor.WebBlue.css" rel="stylesheet" type="text/css" />
<link href="Skins/WebBlue/Window.WebBlue.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadEditor
            id="RadEditor1"
            runat="server"

            ImageManager-ViewPaths="~/"
            ImageManager-UploadPaths="~/"
            ImageManager-DeletePaths="~/"

            DocumentManager-ViewPaths="~/"
            DocumentManager-UploadPaths="~/"
            DocumentManager-DeletePaths="~/"

            FlashManager-ViewPaths="~/"
            FlashManager-UploadPaths="~/"
            FlashManager-DeletePaths="~/"

            MediaManager-ViewPaths="~/"
            MediaManager-UploadPaths="~/"
            MediaManager-DeletePaths="~/"

            TemplateManager-ViewPaths="~/"
            TemplateManager-UploadPaths="~/"
            TemplateManager-DeletePaths="~/"

            DialogsCssFile="Skins/WebBlue/Widgets.WebBlue.css"
            EnableEmbeddedSkins="false"
            EnableEmbeddedBaseStylesheet="false"
            Skin="WebBlue"

            ></telerik:RadEditor>
    </form>
</body>
</html>

[Martin]

Hi Peichung,

The WebBlue skin does work, at least on our side. I even tested it with your code, and everything works like charm. We are not sure what do you exactly see when try to load the WebBlue skin, so I would like to ask you to send us a small running project so we can test it on our site. In the meantime, you may take a look if you have included the WebBlue skin for all controls that RadEditor makes use of (they are described in this forum post - http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-q3-2008-skins-available-for-download.aspx), because if they are missing, the skin will certainly fail to load.

Best wishes,
Martin Ivanov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Sunil]

Hello Telerik Team,

I have created custom skin for rad editor.I am using telerik version 2013.3.1114.40 .
Followed steps suggest by you as below.

css register
    <link id="Link3" runat="server" href="~/App_Themes/Skins/Editor.css" rel="stylesheet" type="text/css" />
    <link id="Link4" runat="server" href="~/App_Themes/Skins/Window.css" rel="stylesheet" type="text/css" />
    <link id="Link5" runat="server" href="~/App_Themes/Skins/gTest/Editor.gTest.css" rel="stylesheet" type="text/css" />
    <link id="Link6" runat="server" href="~/App_Themes/Skins/gTest/Window.gTest.css" rel="stylesheet" type="text/css" />


Added in raadeditor

DialogsCssFile="~/App_Themes/Skins/gTest/Widgets.gTest.css" Skin="gTest" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" 


my Widgets.gTest.css is



@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');/*This should have been imported automatically!*/
@import url('../FileExplorer.css');
@import url('../Menu.css');

@import url('ToolBar.gTest.css');
@import url('FormDecorator.gTest.css');
@import url('TabStrip.gTest.css');
@import url('Editor.gTest.css');
@import url('TreeView.gTest.css');
@import url('Splitter.gTest.css');
@import url('Slider.gTest.css');
@import url('Upload.gTest.css');
@import url('Window.gTest.css');
@import url('Grid.gTest.css');
@import url('Menu.gTest.css');   

But still facing issue when open Image Manager.
Some css is not applied properly.


Pelase suggest me what can I do next to solve this issue.

[Ianko]

Hi Sunil,

Could you please try enabling the EnableEmbeddedBaseStylesheet property and see if that resolves the issue.

Regards,
Ianko
Telerik