CSS'ing TinyMCE on a Diazo'ed Plone site

Question

I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.

In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:

.radioscrolllist .list {min-height: 2em;}

However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.

Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:

• dialog.css
• plonebrowser.css
• columns.css

Answer 1

I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):

#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }

(Clearly we should find a less hacky solution, but I haven't had a chance.)

Answer 2

This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:

/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
    /* Image browser was jumbled */
    float: none;
}
#content #internallinkcontainer .list.item span, 
#content #internallinkcontainer .list.item a {
    /* Link browser was packed too much */
    position: inherit;
}
#internallinkcontainer input[type="radio"] {
    vertical-align:     middle;
}

/* @end */

Which get's my Link Browser looking like this again:

Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.

plone.css

plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.

plone.css generation:

https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py

Note: plone.css is @import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.

Answer 3

You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.

Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.