Styling TinyMCE for a Diazo-enhanced Plone website

Question

Styling TinyMCE for a Diazo-enhanced Plone website

Initially, I believed that TinyMCE would remain unaffected by the Diazo theme. However, there seems to be some CSS creeping in from somewhere, causing certain functions to be more difficult to use. For instance, the line height on all the rows has drastically decreased, making it challenging to select each row.

By examining Firebug, I found that I can resolve this issue by adding a min-height value from dialog.css:

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

Unfortunately, I have been unable to find where to implement this fix permanently. I've attempted to place it in the Diazo theme style.css, ploneCustom.css, and customized both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — but none of these solutions have worked.

Do you have any suggestions on how/where I can make this correction? This issue only arises in the Diazo version of the site, not the unthemed version. It appears that the only CSS files loading on the TinyMCE iframe are:

dialog.css
plonebrowser.css
columns.css

css tinymce plone diazo

Answer 1

Answer №1

Here's a snippet from my project's CSS that tackles a similar issue. However, I encounter different challenges with each project, especially when it comes to general CSS and columns:

/* 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 */

Implementing the above code helps restore the appearance of my Link Browser.

Aside from the challenges with Diazo-CSS, it seems like there could be an issue with plone.css being cached. The information below is sourced from the developer manual, with modifications that I have made but have not yet been incorporated.

plone.css

plone.css is dynamically generated based on the portal_css registry configuration. It is primarily used in TinyMCE to consolidate all CSS styles into the TinyMCE editor in one go. It is not utilized on standard Plone pages.

Generation of plone.css:

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 prevents it from being refreshed when a normal Plone page is reloaded in the browser, even in development mode. Therefore, if you notice that your CSS updates are not reflected in the TinyMCE plugin (e.g. in the link/image browser) while working on your theme, simply perform a hard refresh directly on: /plone.css to clear the cached version.

Answer 2

Here's a snippet from my project's CSS that tackles a similar issue. However, I encounter different challenges with each project, especially when it comes to general CSS and columns:

/* 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 */

Implementing the above code helps restore the appearance of my Link Browser.

Aside from the challenges with Diazo-CSS, it seems like there could be an issue with plone.css being cached. The information below is sourced from the developer manual, with modifications that I have made but have not yet been incorporated.

plone.css

plone.css is dynamically generated based on the portal_css registry configuration. It is primarily used in TinyMCE to consolidate all CSS styles into the TinyMCE editor in one go. It is not utilized on standard Plone pages.

Generation of plone.css:

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 prevents it from being refreshed when a normal Plone page is reloaded in the browser, even in development mode. Therefore, if you notice that your CSS updates are not reflected in the TinyMCE plugin (e.g. in the link/image browser) while working on your theme, simply perform a hard refresh directly on: /plone.css to clear the cached version.

Answer 3

Answer №2

Last week, I encountered the same issue and came up with a workaround. I resolved it by including the following code in my theme's CSS. It's worth noting that the tinymce dialogs are not part of the iframe that holds the edited content; instead, they are in the main frame:

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

(It's clear that a more elegant solution should be found in the future, but for now, this workaround suffices.)

Answer 4

Last week, I encountered the same issue and came up with a workaround. I resolved it by including the following code in my theme's CSS. It's worth noting that the tinymce dialogs are not part of the iframe that holds the edited content; instead, they are in the main frame:

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

(It's clear that a more elegant solution should be found in the future, but for now, this workaround suffices.)

Answer 5

Answer №3

It appears that you've come close to figuring it out on your own: tweaking the column.css file should do the trick without the need for any important declarations.

Furthermore, it seems that this issue may not be Diazo-related, as the ploneCustom.css file will not be transmitted to the dialog window on a non-diazo website. Interesting.

Answer 6

It appears that you've come close to figuring it out on your own: tweaking the column.css file should do the trick without the need for any important declarations.

Furthermore, it seems that this issue may not be Diazo-related, as the ploneCustom.css file will not be transmitted to the dialog window on a non-diazo website. Interesting.

Styling TinyMCE for a Diazo-enhanced Plone website

Answer №1

plone.css

Answer №2

Answer №3

Similar questions

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

Looking to save a CSS element as a variable

Enhance your website with the latest jQuery plugins and CSS

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

Increase the spacing between the scrollbar and the border

Styling the large drop-down menu for Internet Explorer 7

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

Having trouble with the href attribute not properly redirecting to a different page

The background hue does not cover the entire element

CSS - Text and dropdown misalignment due to spacing issue

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Issue with Error in Expanding Label in Material-Ui using React

Customize Material UI components by incorporating SASS classes

What is the best way to modify the colors of two specific elements using a combination of CSS and JavaScript

Why my attempts to alter numerous CSS elements using JQuery are failing?

The Stylish Choice: Materialize CSS Dropdown Selector

center items alignment with hidden tags

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Why is it that a label tag cannot be placed directly above an input tag?

"Implement a feature in JavaScript that allows users to click on images to navigate