RichTextEditor usability - how to control display font and size?
Umbracians are well known for their bionic eyesight (just try and read this page from more than 30cm, or the user documentation on a normal A4 print), but our users are ordinary mortals. When they are inputting the spectacularly interesting content we want from them --
they need to be able to READ IT!!!
-- so my question is: How can we control the font family and the font size of the text as it is displayed for content entry in the Rich Text editor?
If I understand your question correct you want to know how to create style for the Rich Text Editor, so the end user of your Umbraco project can choose the right styling for e.g heading or body text in the style dropdown in the Rich Text Editor.
Thanks for responding. I'm afraid your answer, excellent though it is, is not the answer to the problem I have! Our problem is with the display of text in the text editor itself, ie the display during editing - not the final display in the end-users' browsers. It is too small to be used by our staff.
The display is styled by body#tinymce.mceContentBody (font-family:Verdana, Arial,...; font-size: 10px;) That is unusably small. How can it be made larger?
I agree, the default text size for the UI when editing the rich text field is tiny and it's hard to find exactly how to change that.
Also, starting to experiment with 7.1.4 (have been on 6.1.6), and wondering if there's a way to increase the size of a richtext field, since now we can't hide the sidebar as from before, and the rich text fields end up using maybe 1/3 the size of the screen. Would love to be able to full-screen them because often our rich text content is lengthy. Alternatively, if there was an option to display fields below labels, rather than labels taking such a wide vertical swath to the right of fields, that would help a lot. (If I "hide labels" for the RichText datatype, that does give more room, but then there's no identifying label at all of course. A checkbox like "place label above field?" would be rad.)
I would make a new stylesheet (call it something like rte.css) by going to Settings > Stylesheets > Create. Add styles that make different elements larger (<p>, <h1>, <h2>, etc).
In Umbraco, go to Developer > Datatypes. Click on "Rich Text Editor". Under "Related Stylesheets", check the newly created rte.css field.
The new CSS file should be attached to any RTE. But since you didn't add this new stylesheet to any templates, nothing changes on the actual website front end.
RichTextEditor usability - how to control display font and size?
Umbracians are well known for their bionic eyesight (just try and read this page from more than 30cm, or the user documentation on a normal A4 print), but our users are ordinary mortals. When they are inputting the spectacularly interesting content we want from them --
they need to be able to READ IT!!!
-- so my question is: How can we control the font family and the font size of the text as it is displayed for content entry in the Rich Text editor?
Hi Jack,
If I understand your question correct you want to know how to create style for the Rich Text Editor, so the end user of your Umbraco project can choose the right styling for e.g heading or body text in the style dropdown in the Rich Text Editor.
If it is the question take a look at this video: http://umbraco.tv/videos/implementor/fundamentals/stylesheets-and-javascript/setting-up-rte-styles/
And if you don´t have access to Umbraco TV, then try to see this documentation: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-%28tinymce%29/add-styles-to-the-drop-down-menu-for-editors-to-use
I hope this helps, but If this post, doesn't answer your question, I hope that you could explain your question more detailed.
/Dennis
Hi Dennis
Thanks for responding. I'm afraid your answer, excellent though it is, is not the answer to the problem I have! Our problem is with the display of text in the text editor itself, ie the display during editing - not the final display in the end-users' browsers. It is too small to be used by our staff.
The display is styled by body#tinymce.mceContentBody (font-family:Verdana, Arial,...; font-size: 10px;) That is unusably small. How can it be made larger?
I agree, the default text size for the UI when editing the rich text field is tiny and it's hard to find exactly how to change that.
Also, starting to experiment with 7.1.4 (have been on 6.1.6), and wondering if there's a way to increase the size of a richtext field, since now we can't hide the sidebar as from before, and the rich text fields end up using maybe 1/3 the size of the screen. Would love to be able to full-screen them because often our rich text content is lengthy. Alternatively, if there was an option to display fields below labels, rather than labels taking such a wide vertical swath to the right of fields, that would help a lot. (If I "hide labels" for the RichText datatype, that does give more room, but then there's no identifying label at all of course. A checkbox like "place label above field?" would be rad.)
See screenshots from 6.1.6, then 7.1.4:
7.1.4:
I would make a new stylesheet (call it something like rte.css) by going to Settings > Stylesheets > Create. Add styles that make different elements larger (<p>, <h1>, <h2>, etc).
In Umbraco, go to Developer > Datatypes. Click on "Rich Text Editor". Under "Related Stylesheets", check the newly created rte.css field.
The new CSS file should be attached to any RTE. But since you didn't add this new stylesheet to any templates, nothing changes on the actual website front end.
I edited umbraco\lib\tinymce\skins\umbraco\content.min.css and seems to work (I actually edited a copy call content.css and then minimized)
is working on a reply...