Umbraco lets you assign one or more stylesheets to the richtext editor data type so you can render your custom styles in it. I created a stylesheet named editor.css and assigned it to the data type. I then added styles to editor.css so that the text will render how I want it to. This does not work in Umbraco 4.7.
Using Firebug I was able to determine that Umbraco is loading the stylesheets in the wrong order. In previous versions of Umbraco, the editor first loads content.css and then an assigned stylesheet. This allows the assigned editor to overwrite any styles in content.css. In Umbraco 4.7 it loads your assigned stylesheet first, and then content.css. This mean that content.css will overwrite styles in the assigned stylesheet.
Anyone have any ideas on how I might correct this? Or would I have to wait for a patch IF the devs want to fix this?
How did you add the styles for your editor.css? Did you add your styles as childs of the editor.css in umbraco? And did you then enter the styles for your classes and elements in the textbox?
I usually don't add any styles in the textbox. I just add the elements and classes needed in the editor and then I add the styles in my default stylesheet. This gives better control of the cascade.
Umbraco 4.7 RTE stylesheets load in wrong order
Umbraco lets you assign one or more stylesheets to the richtext editor data type so you can render your custom styles in it. I created a stylesheet named editor.css and assigned it to the data type. I then added styles to editor.css so that the text will render how I want it to. This does not work in Umbraco 4.7.
Using Firebug I was able to determine that Umbraco is loading the stylesheets in the wrong order. In previous versions of Umbraco, the editor first loads content.css and then an assigned stylesheet. This allows the assigned editor to overwrite any styles in content.css. In Umbraco 4.7 it loads your assigned stylesheet first, and then content.css. This mean that content.css will overwrite styles in the assigned stylesheet.
Anyone have any ideas on how I might correct this? Or would I have to wait for a patch IF the devs want to fix this?
Proof:
Umbraco 4.0.2.1
<iframe id="ctl00_body_content_ifr" frameborder="0" src="javascript:""" style="width: 100%; height: 500px;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<base href="http://mydomain.com/">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" mce_href="http://mydomain.com/umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css" href="http://mydomain.com/umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css">
<link rel="stylesheet" mce_href="http://mydomain.com/umbraco_client/tinymce3/plugins/media/css/content.css" href="http://mydomain.com/umbraco_client/tinymce3/plugins/media/css/content.css">
<link rel="stylesheet" mce_href="http://mydomain.com/umbraco/../css/editor.css" href="http://mydomain.com/umbraco/../css/editor.css">
^ My stylesheet loaded last ^
</head>
<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
</body>
</html>
</iframe>
Umbraco 4.7
<iframe id="body_prop_topContent_ifr" frameborder="0" src="javascript:""" title="Rich Text Area" style="width: 100%; height: 200px;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<base href="http://mydomain.com/">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://mydomain.com/css/editor.css" rel="stylesheet" type="text/css">
^ My stylesheet loaded first ^
<link rel="stylesheet" data-mce-href="http://mydomain.com/umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css" href="http://mydomain.com/umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css">
<link rel="stylesheet" data-mce-href="http://mydomain.com/umbraco_client/tinymce3/plugins/spellchecker/css/content.css" href="http://mydomain.com/umbraco_client/tinymce3/plugins/spellchecker/css/content.css">
</head>
<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
</body>
</html>
</iframe>
Hi Robert
How did you add the styles for your editor.css? Did you add your styles as childs of the editor.css in umbraco? And did you then enter the styles for your classes and elements in the textbox?
I usually don't add any styles in the textbox. I just add the elements and classes needed in the editor and then I add the styles in my default stylesheet. This gives better control of the cascade.
Does this help?
/Jan
Be sure to vote for the workitem on codeplex - I'm sure it will be fixed in 4.7.1 as a lot of people have voted for it.
As a workaround, you can add !important to the classes in your editor.css that aren't getting applied.
My easy solution to fix was to do the following:
In your editor stylesheet, instead of:
body {
color: #444444;
font: Vaerdana;
}
Do this instead:
body.mceContentBody {
color: #444444;
font: Vaerdana;
}
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.