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

Fix tinyMCE small font problem

by ledwell published Aug 16, 2016 10:49 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
 

This is pretty easy fix. 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

  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;
}
 

Create a new registery

Navigation