Custom CSS not displaying in RadEditor

[flin]

We've recently upgraded our RadEditor For SharePoint 2007 (Lite Version) from 4.3.1.0 to 4.5.4.0.  Everything went well for the most part except for the styles from within the rich text editor.  The editor is not displaying our custom CSS.

I did some tinkering and got it to work with Firefox and IE7.  However I was unsuccessful in correcting this issue in IE6.  Could you recommend a solution?

Here's an example of some of our CSS from the EditorContentArea.css:

(inserted at the bottom of file)
------

body {
    font: 10pt tahoma, arial, sans-serif;
    line-height: 14pt;
}


/* heading styles */
h1 {
    font: 20pt georgia, serif;
    margin: 10px 0 20px;
    padding: 0;
    letter-spacing: -1px;
    white-space: nowrap;
}

h2 {
    font: bold 12pt tahoma, arial, sans-serif;
    margin: 30px 0 0;
    padding-bottom: 3px;
    border-bottom: solid 1px #cacaca;
}

[Rumen]

Hi Flin,

Please, make sure that you are updating the EditorContentArea.css file of the used skin by RadEditor for MOSS. If it is using the Default2006 skin, you need to update the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/4.5.4.0__1f131a624888eeed/RadControls/Editor/Skins/Default2006/EditorContentArea.css file.

You can also set the CssFiles property to point to the EditorContentArea.css file as it is shown in the following KB article: Populating RadEditor's Apply CSS Class dropdown with custom styles.


Best regards,
Rumen
the Telerik team

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

[flin]

Thanks for the KB article.  We were able to get it to work with both Firefox and IE 7.  However, the custom styles are not displaying in IE 6.  Do you know of a workaround? I see that in the HTML source, RadEditor is encoding the HTML from within the rich text editor.  I believe this may be confusing IE 6 in the sense that it will not apply my custom styles?

[Rumen]

Hi Flin,

Could you tell us where the custom styles are not displayed in the editor or on the public page outside of the editor?  The EditorContentArea.css file styles only the content area of RadEditor, but will not apply classes to the content displayed outside of the control.

If you want to style only the content area, then open the EditorContentArea.css file and apply the !important rule to all css properties values, for example:

body
{
    background-color: white !important;
    ...
}

.customClass
{
    font-size: 10px !important;
}

You should also delete your IE6 browser cache and restart your browser when saving changes to the EditorContentArea.css file.

Best regards,
Rumen
the Telerik team

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

[shailendra]

Hi, 

I am not able to add the custom CSS in the Apply css list in RadEditor version 5.3.1.0.

Editor is not taking page css files links, present in the page, it suppose to take page css file.

I am also trying from design time and also from code behind using CssFiles.add method.

Thanks,

Shailendra

[Stanimir]

Hello Shailendra,

You can find information on defining custom CSS styles in Rad Editor for MOSS in our online help.
http://www.telerik.com/help/aspnet-ajax/defining-custom-css-styles.html

Please, review the article and if you have any further questions we will be glad to help  you.

I hope this helps.

Kind regards,
Stanimir
the Telerik team

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

[shailendra]

Thanks for reply,

It is working fine when I create CssEditor.css file, but I have different subsites with different style sheet. I want to load the style as per current subsite.

In the previous version that I was using for MCMS site, it was taking the style added in the page using link tag. so I was change the stylesheet  link using code behind.

But the new version (5.3.1.0) for the MOSS site it not loading the stylesheet added in the page as well I am also trying to add the css using code behind using API.

Telerik.Web.UI.EditorCssFile _mycss = new Telerik.Web.UI.EditorCssFile("/EDCAPP/CustomColumns/Style/MyStyle.css");

MOSSradEditor.CssFiles.Add(_mycss);

Thanks,

Shailendra

[Stanimir]

Hi Shailendra,

There is a way of using different configuration files for different webs. You can find information about this in our online help http://www.telerik.com/help/aspnet-ajax/different-configuration-files-for-different-webs.html .

In order to set the path to the different CSS files, add the following lines to the ToolsFiles that you create.

<root>
    ...........
    <cssFiles>
        <item name="/_wpresources/RadEditorSharePoint/CustomCssFile.css " />
    </cssFiles>
    ..........
</root>

I hope this helps.

All the best,
Stanimir
the Telerik team

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

[shailendra]

Thanks for reply,

I am able to load the cssFile by updateing the ToolsFiles.xml file as per your suggestion.

In my scenario i am getting only one UID for all the subsites. I have also created guids.config file but single GUID in comming for all the subsites, so i am unable to create saprate config files for each subsites.

I have also created the ToolsFile.xml file with actual GUID (SPWeb.ID)  of the subsite. But it is not accepting this GUID, only root site guid is working.

 

So still I am not able to load the style as per current subsite.

Is there no way to set the cssFiles using c# code?

I have used this code but it is not giving the results.

Telerik.Web.UI.EditorCssFile _mycss = new Telerik.Web.UI.EditorCssFile("/EDCAPP/CustomColumns/Style/MyStyle.css");

MOSSradEditor.CssFiles.Add(_mycss);

Thanks,

Shailendra

[Stanimir]

Hi Shailendra,

The CssFiles Property of RadEditor for MOSS is responsible for getting or setting the list of external CSS files that should be made available in the editor's content area. You can find more information about it in our online help http://www.telerik.com/help/aspnet-ajax/telerik.web.ui-telerik.web.ui.radeditor-cssfiles.html

I hope this helps.


Kind regards,
Stanimir
the Telerik team

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