-
- 98 Posts
I see where the Styles dropdown gets modified, it's the "styles.js" file (which is buried pretty deeply in the directory tree.)
I still don't see where to change the background color of the dropdown...maybe in config.js.
-
- 98 Posts
I see a css file used by CKEditor ("editor.css")...and I suspect that my CSS file for the website is loaded AFTER the default settings in the "editor.css" file, and overrides them in this instance.
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.
So if you can get any customizations working for ckEditor, let me know. I have tried adding custom css and js files, and even altering the core files, and it never seemed to take. I gave up on it, so I am certainly interested in someone can successfully do what you are setting out to do.
Jason
discuss.answer
-
- 98 Posts
Just getting back to this...with success.
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
[ed. note: dennisleahy last edited this post 9 years, 11 months ago.]
-
- 98 Posts
Addendum:
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