Need help with Telerik RADEditor CSS issues plz

Question

<telerik:RadEditor ToolbarMode="Default"
ID="editor1" runat="server" EnableEmbeddedBaseStylesheet="true">
</telerik:RadEditor>

The editor's using Default skin..when I made changes to Editor.Default.CSS file...they didn't reflect on my page..but when I type the following I can see the changes:-

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

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadEditor ToolbarMode="Default"
ID="editor1" Skin="Default" runat="server" EnableEmbeddedSkins="true">
</telerik:RadEditor>

Do I HAVE to create a custom Skin file for the changes to reflect ??I dont wanna coz the editor has been used in many files and now linking new custom CSS file in each and every aspx file will be such a pain.. I just want this to be added in the Skin:-

body
{
    background-image:none;
    background-color:White;
}

What this does is that it makes the background color of the content area white..earlier the content area of the Editor was inheriting background-image property of the Master Page's body tag...ohh and another funny issue is that the Font styles too are inheriting Master Page's properties only..like Heading 2 in the Editor's drop down list has got a background color when I want it to be simple..

So is making custom skin css file the only solution ..How do I get the changes to reflect thru the Default css file only ? I dont wanna create custom class..why didn't the changes reflect ?

Answer 1

Make sure your body background-color is not overwritten in the Window.Default.css. Always the last entry in a CSS file or a subsequent file takes precedence over the one before. Try going for background-color:white !important;.
Adding !important after any CSS rule will make it just that and override any precedence.

As for why the changes didn't reflect: Check which styles the Telerik control is actually using. Check the Source of the page and check the references CSS files whether they have your added properties - maybe there are some other CSS files creeping around in some cache?

Your tool of choice to check the styles for a specific element might be the Internet Explorer (if you're using IE) Developer Toolbar - just hit F12 and select the Telerik Editor with the little arrow and you will see all associated styles and where they came from.

Answer 2

If you do not want the editor to inherit the CSS from the main page, you should tell it which CSS classes are to be loaded in the content area (iframe). See the external CSS help article and probably the CSS dropdown article as well. Finally, there is a separate page for content area CSS troubleshooting - content area appearance problems