How do I override styles for the content area?

[Mark Davis]

I've seen the client script solution of how to do this (calling get_ContentArea), but want to provide CSS that applies to the content area.

I've tried specifying a value for the ContentAreaCssFile property, but this doesn't prevent the other CSS files on the page being copied. Also, since my CSS file is the first <LINK>, some of my styles are not applied (they are overriden by later styles).

So, I'm either looking for a way to make my CSS file (specified by ContentAreaCssFile) to be listed last, or a way to prevent the CSS files on the page being copied to the content area.

[Tervel]

Hi Mark,

You can easily prevent the editor from copying the css of the parent page by specifying the exact CSS files you want to be imported in the editor using its CssFiles property, e.g.

<telerik:radeditor runat="server" ID="RadEditor1">
<CssFiles>
     <telerik:EditorCssFile Value="~/mycss.css" />
</CssFiles>
</telerik:radeditor>

A more extensive example will be added to the editor online examples for the Q3 release.

Sincerely yours,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark Davis]

Thanks, that worked great.

[Fabio Honigmann]

I was going to post a question but i just found the answer myself.
So I will just post it here for future reference.

If you are like me that requires to use declarative databinding to resolve the path of the CSS file used, an easy work around i found is to do the binding to "ContentAreaCssFile" and then just override the default style sheets by adding an empty "<CssFiles>" entry.

<telerik:RadEditor ID="RadEditor1" runat="server"
    ContentAreaCssFile='<%# String.Format("/Resources/{0}/EditorStyles.css", CurrentWebsite.Id) %>'
    Content='<%# Bind("Body") %>'>
    <CssFiles>
        <telerik:EditorCssFile Value="" />
    </CssFiles>
</telerik:RadEditor>

I hope this helps.

Fabio