You are here: Home / Documentation / How To's / Fix tinyMCE small font problem

Fix tinyMCE small font problem

by ledwell published Mar 18, 2015 09:56 AM, last modified Aug 16, 2016 10:49 AM
Fixes font and spacing problem when using bootstrap and diazo

Example of TinyMCE problem and fix

 

This fixes

  • Tiny Font problem in TinyMCE
  • Small Font problem in the green editing toolbar
  • Line height problem in the drop downs in the green editing toolbar
  • When choosing an internal link the radio buttons fail to line up with their description text
 

It requires

  1. adding a new css file to the "custom" folder
  2. adding a new registry in the "CSS Registry" (you could probably skip this part too, directions below)

Create a new CSS file

NOTE: You could could skip all these steps and just add the code to your plonecustom.css file and call it good but I added it to a new file and the registry to give myself more flexibility incase my changes caused unexpected problems in the future. I could, for example, add a conditional statement that only calls the css file IF a user is logged in (which in this case they always will be).
  1. Go to the ZMI of your plone site
  2. Choose "portal_skins > custom"
  3. Create a new file and name it (give it ID of) "editingBootstrapFixs.css" 
  4. Edit that file and copy and paste the following code into that file and "save"
/* =============================
   TOOLBAR FONT SIZE FIX
============================= */

html {
  font-size: 1em!important;
}

/* =============================
    TINYMCE FONT SIZE FIX
============================= */

body {
  font-size:  1em !important;
}

/* =============================
    TOOLBAR DROPDOWN MENU FIX
============================= */

dt, dd {
  line-height: 1.9em!important;
}

/* =============================
    POPUP FOOTER FIX
============================= */
.dialog-wrapper #footer {
padding:0px!important;
margin:0px!important;
background-color:transparent
}

/* =============================
    TINYMCE LINK CONTAINER FIX
============================= */
#internallinkcontainer div {
  padding:0px!important;

}

#internallinkcontainer .list.item a,
#internallinkcontainer .list.item span {
position:relative !important;
}
 

Register your CSS file

  1. Go to the root of your site in the ZMI
  2. Choose "portal_css"
  3. Add a new style sheet at the bottom and type in the name of your new stylesheet in the ID/URL dialogue box "editingBootstrapFixes.css"
  4. Restrict to authenticated users checkbox should be checked
 
Test!
 
Navigation