[Solved] How to css class to content area correct?

[Blasty]

I'm doing something wrong, and all the examples I see are very simplistic and not helping me.

I'm putting this editor in an admin area, like some of the examples alude to.  My site has one css file for the normal area, and one css file for the admin area.   When the text is displayed, naturally it won't use the CSS from the admin area, so when using the editor, I'd like the editor to have the CSS file from the main website available.

After some searching, I see that I need to do the following setting

 

<CssFiles>

 

 

    <telerik:EditorCssFile Value="~/Css/mainsitefile.css" />

 

 

</CssFiles>


So when I do this though, the content area is basically applying every single setting from inside the css file.  Specifically my big honking background settings that the whole main website is based on.

Of course I don't want this.  The background I need to apply should be one from a specific class in my main website CSS file.

So I tried to add this.

 

 

<CssClasses>

 

 

 

 

 

        <telerik:EditorCssClass Name="blogArea" Value=".blogArea" />

 

 

 

 

 

</CssClasses>

But It still shows my big honking main website background instead of the simple black background in this class.

So I tried taking off the CSSFile part, but now I have nothing.

So at this point, I need help, because clearly I'm not doing this the obvious way it was intended to work.  Point me in the right direction please.

 

[Rumen]

Hi Blasty,

In your scenario you should also set the ContentAreaCssFile property to point to another css file (ContentArea.css), e.g.

<telerik:RadEditor ID="RadEditor1" ContentAreaCssFile="~/ContentArea.css" runat="server" >
    <CssFiles>
        <telerik:EditorCssFile Value="~/public.css" />
    </CssFiles>
</telerik:RadEditor>

In the ContentArea.css file put a global body class with a background-color property with the desired color value and apply the !important rule to it, e.g.

body   
{  
   background-color: #ffffff !important;  
   background-image: none !important;  
   background-repeat: no-repeat !important;  
}

For your convenience I have attached my test project.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.