Rank 1
We are trying to specify a custom css file for the content area of the RadEditor by setting the radEditor.ContentAreaCssFile property.
This causes it to load the appropriate css file into the editor as expected.
However, it also loads the css files from the parent pages and it loads them after the ContentAreaCssFile stylesheet file, which means that the ContentAreaCssFile's styles get overridden by the parent page's styles.
The resulting Head area looks like this:
<head>
<link href="/common/css/editor.css" rel="stylesheet" /> <------------------- ContentAreaCssFile
<link href="/admin/common/css/admin.css" rel="stylesheet" /> <------------------- stylesheet from parent page
<link href="/admin/common/css/contentmanagement.css" rel="stylesheet" /> <------------------- stylesheet from parent page
</head>
According to the documentation for the RadEditor found here:
http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html
... we should be able to fix this by setting the CssFiles property to load only the stylesheets we want.
However, the editor appears to be ignoring this setting. We've tried setting it in markup and programmatically. Neither worked. It still loads the stylesheets for the parent pages.
We're using version 2009.2.701.20 of the Telerik.Web.UI.dll
8 Answers, 1 is accepted
You can fix the problem only by setting the ContentAreaCssFile property. You should open the /common/css/editor.css file and set the !important rule after each css property value, e.g.
body
{
font-family: Verdana !important;
font-size: 18px !important;
color: #99ff99 !important;
background-color: #333333 !important;
text-align: left !important;
word-wrap: break-word !important;
}
You can see the following live example for more information: Customize Content Area.
If you experience any problems, open a support ticket and send a sample working project that demonstrates them. I will examine it and provide a solution.
All the best,
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.
Rank 1
We’ve already used the method of setting !important on the styles, but for various reasons that approach will not work for us.
Please read our original post carefully.
We are already setting the ContentAreaCssFile property and we have tried setting the CssFiles property, but setting that property is not affecting the loading of css from the parent pages, despite the fact that Telerik documentation says it should. (The link to the documentation where it says this was provided in our original forum post)
Are you basically saying that the functionality described in the Telerik documentation doesn’t really exist? Is the documentation wrong?
The solution in the documentation works fine and you can experience this problem only if you set the CssFiles property in the codebehind and after that override it by setting the ToolsFile property. Is this your scenario?
I asked you to open a support ticket and send us a sample working project that demonstrates the problem and your scenario. I will examine it, reproduce the problem and provide a solution.
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.
Rank 1
This information was added to the documentation, but it should be uploaded to the public site. One this is done your fellow developers will be able to read it and hopefully avoid this problem.
Have a nice weekend!
Rumen
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Rank 2
<link id="RADEDITORSTYLESHEET0" href="/App_Themes/default/typography.css" type="text/css" rel="stylesheet">
Thanks,
Sener Koc
Grey Worldwide Istanbul
Senior Web Technologist
Try the solution provided in the following help article: Content Area Appearance Problems.
All the best,
Rumen
the Telerik team
Rank 2
ok thank you. I did it from code behind dynamicly.
RadContentEditor.CssFiles.Clear();EditorCssFile ecfTypo = new EditorCssFile("~/App_Themes/" + ConfigurationManager.AppSettings["Default_Theme"].ToString() + "/typography.css");RadContentEditor.CssFiles.Add(ecfTypo);