Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Jack Orion 5 posts 25 karma points
    Dec 05, 2013 @ 22:22
    Jack Orion

    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?


  • Dennis Aaen 4434 posts 17891 karma points admin hq c-trib
    Dec 05, 2013 @ 22:49
    Dennis Aaen

    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:

    And if you donĀ“t have access to Umbraco TV, then try to see this documentation:

    I hope this helps, but If this post, doesn't answer your question, I hope that you could explain your question more detailed.


  • Jack Orion 5 posts 25 karma points
    Dec 06, 2013 @ 01:00
    Jack Orion

    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? 

  • Eric Schrepel 150 posts 203 karma points
    Jun 06, 2014 @ 22:41
    Eric Schrepel

    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:




  • Damon Bauer 48 posts 95 karma points
    Jun 12, 2014 @ 13:35
    Damon Bauer

    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.

  • Arturo Soler 24 posts 77 karma points
    Sep 06, 2015 @ 09:13
    Arturo Soler

    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)

Please Sign in or register to post replies

Write your reply to: