https://forums.modx.com/thread/?thread=89902 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494105
However, the dropdown listboxes "Styles" and "Format" are using my site's CSS body color (a dark green) and it is very difficult to see the black text. This is just in the dropdowns that it is wrong - it does the WYSIWYG display correctly.

So, is there a tutorial that shows how to modify CKEditor's interface within MODX Revolution?

The other thing I want to do is to customize the styles dropdown, to provide the content creator with css classes I have defined, rather than the inline span markup that is the default behavior. I have done this before (a few years ago) with CKEditor, so I know it can be done - but I don't know how to do it within MODX.

Any help will be greatly appreciated.

Dennis]]> dennisleahy Apr 01, 2014, 10:44 AM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494105 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-495480 The other attribute that you may want to change about the dropdown lists (for style and format) is the width of the dropdown - especially if you modify the contents of the dropdown (and that is done in styles.js file, one directory folder up.)

To modify the width of the dropdowns, you'll need to edit 2 classes in the editor*.css files.

.cke_combopanel {
width:263px;
height:170px
}

.cke_panel_listItem {
margin:0;
padding-bottom:1px;
width: 240px
}

The width is set in the .cke_combopanel (that's the width of the dropdown list, overall), plus in the .cke_panel_listItem (that's the width of the actual item in the list, and must be smaller to accommodate the borders and padding.) The list 13 pixels wider than the listitems worked for me.

Be sure to edit all of the editor files:
editor.css,
editor_ie.css,
editor_ie7.css,
editor_ie8.css,
editor_iequirks.css,
and
editor_gecko.css,
because you don't know what browser your admin users might use.

Again, hope someone finds this helpful.

Dennis]]> dennisleahy Apr 21, 2014, 05:35 PM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-495480 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-495474

To recap: The default behavior of ckeditor in MODX, using the ckeditor 1.1.1-pl Extra, is to take the CSS body attribute for color and background-color, and apply them to the dropdown list items as an inherited value. That is a problem if your website has a dark background color, and the content is in a div with a light color background, using dark text (or the opposite.) I think this is pretty common.

To control the foreground and background colors of the dropdown items in ckeditor:

You need to edit all of the editor css files for that skin style. They can be found in:
manager/assets/components/ckeditor/ckeditor/skins/moono (or whatever style you are using "moono" is the default)

edit all of the editor*.css files (I found no problem with the dialog boxes, so no need to edit those)

find:
.cke_panel_listItem a

and comment out the attribute for color, and add in a new color and background-color attribute

The CSS class for dropdowns will have more values than this, but just noting the ones to change - for example if you want the dropdown lists to have a white background and black text:

.cke_panel_listItem a {
/*color:inherit!important;*/
color:#000;
background-color:#FF9;
}

Be sure to edit all of the editor files:
editor.css,
editor_ie.css,
editor_ie7.css,
editor_ie8.css,
editor_iequirks.css,
and
editor_gecko.css,
because you don't know what browser your admin users might use.

Hope this helps someone. If your web pages use a white background, you will never notice this, but if you use a dark background color behind your pages, you will.

Dennis]]> dennisleahy Apr 21, 2014, 03:54 PM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-495474 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494139
Soooooo... I'm terrible at JavaScript - even the simple JavaScript often baffles me - and if you look in the monster JavaScript file that is the main program file for CHEditor (called "ckeditor.js") you'll be in the deep end of the pool. I just can't read that code, but around line 360 to 361 there seems to be a default style loaded unless the styles.js URL is found.

Methinks this means that the issue is in the way that the plug-in structures the folder directory as opposed to how the folder directory would be structured if someone went directly to http://www.ckeditor.com and downloaded CKEditor. In other words, the main js file is NOT finding our elusive styles.js file, and so is reverting to default styles.

But wait, there's more: On the www.ckeditor.com website, I found this, and this is where I will start back hunting tomorrow: http://docs.ckeditor.com/#!/guide/dev_styles-section-stylesheet-parser-plugin

Dennis]]> dennisleahy Apr 01, 2014, 10:22 PM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494139 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494118
Jason]]> dvstudiosinc Apr 01, 2014, 04:24 PM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494118 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494113
Next, I'll try adding in an abbreviated version of the CSS rule for the dropdown, adding the background-color property, and see if that then overrides.

]]> dennisleahy Apr 01, 2014, 01:13 PM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494113 https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494109
I still don't see where to change the background color of the dropdown...maybe in config.js.]]> dennisleahy Apr 01, 2014, 11:08 AM https://forums.modx.com/thread/89902/how-to-make-ckeditor-display-css-properties-correctly-in-dropdowns#dis-post-494109