How do you make RTE content look the same as the live content?
Hi,
Just watched Doug's video here: http://umbracoukfestival.co.uk/video-and-pics/ where he appears to say that you can get the content in the RTE to look the same as the live content. I found the vid very useful and have created 3 RTE's of the right size and have added some styles to the style dropdown. However, I can't get the <p> font size right without it changing the live content font size. Is there an accepted way to do this or is it something we just live with because it's near enough (which it is actually, but my client's fussy, lol)?
Hi. Some days ago I found (a bit occasionally) the trick that then I used and it perhaps can be usefull. If you take a look at how RTE is rendered in backoffice you'll find that actually it's an iframe and html rendered inside this iframe includes a reference to several css files:
The most ineteresting one here is /umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css - this one contains the very styles that are used to styling the html rendered inside RTE.
So, I realised that it's possible to do several steps: 1) clean the contents of this file; 2) create some css file in the /css folder, say 'tinymce.css'; 3) include the latter file in both 'content.css' (by an @import statement) and to the site templates (referencing it directly with a <link> tag or in css by @import)
After that any style placed to the 'tinymce.css' file will be applyed to both the live site and RTE.
So it's not as the Umbraco documentation says then? Maybe the documentation should be updated or the RTE system should be updated to work properly. ATM I have added styles that look awful in the RTE but correct in the main site. It's a BIG selling point for Umbraco that this should work properly. I really don't know what to do for the best.
In a UMB 4.7.0 site I have a style sheet attached to my RTE. I have a simple style thus:-
.smalltext {font-size:0.8em;color:red;}
When applied to a word in the RTE, nothing happens visually there. The style is applied as a span which can be seen in the html view and it is correctly applied to the actual page on the live site. However, I need it to show up in the RTE or the client will think I've gone mental. I've tried adding the style to /umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css stylesheet but that makes no difference. I'm at my wits end.
Yes I did, that's why it all works great apart from it visually affecting the style in the RTE itself. If you look at the HTML view, a span is added with the class around the intended target. The live page is affected correctly but the look of the target in the RTE is unchanged.
How do you make RTE content look the same as the live content?
Hi,
Just watched Doug's video here: http://umbracoukfestival.co.uk/video-and-pics/ where he appears to say that you can get the content in the RTE to look the same as the live content. I found the vid very useful and have created 3 RTE's of the right size and have added some styles to the style dropdown. However, I can't get the <p> font size right without it changing the live content font size. Is there an accepted way to do this or is it something we just live with because it's near enough (which it is actually, but my client's fussy, lol)?
Craig
Hi. Some days ago I found (a bit occasionally) the trick that then I used and it perhaps can be usefull. If you take a look at how RTE is rendered in backoffice you'll find that actually it's an iframe and html rendered inside this iframe includes a reference to several css files:
The most ineteresting one here is /umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css - this one contains the very styles that are used to styling the html rendered inside RTE.
So, I realised that it's possible to do several steps:
1) clean the contents of this file;
2) create some css file in the /css folder, say 'tinymce.css';
3) include the latter file in both 'content.css' (by an @import statement) and to the site templates (referencing it directly with a <link> tag or in css by @import)
After that any style placed to the 'tinymce.css' file will be applyed to both the live site and RTE.
So it's not as the Umbraco documentation says then? Maybe the documentation should be updated or the RTE system should be updated to work properly. ATM I have added styles that look awful in the RTE but correct in the main site. It's a BIG selling point for Umbraco that this should work properly. I really don't know what to do for the best.
Craig
In a UMB 4.7.0 site I have a style sheet attached to my RTE. I have a simple style thus:-
.smalltext {font-size:0.8em;color:red;}
When applied to a word in the RTE, nothing happens visually there. The style is applied as a span which can be seen in the html view and it is correctly applied to the actual page on the live site. However, I need it to show up in the RTE or the client will think I've gone mental. I've tried adding the style to /umbraco_client/tinymce3/themes/umbraco/skins/umbraco/content.css stylesheet but that makes no difference. I'm at my wits end.
Any clues would be appreciated.
Craig
Did you associate a stylesheet with the smalltext class in it with the RTE in the Developer section of the Umbraco backend?
Yes I did, that's why it all works great apart from it visually affecting the style in the RTE itself. If you look at the HTML view, a span is added with the class around the intended target. The live page is affected correctly but the look of the target in the RTE is unchanged.
is working on a reply...