PDA

View Full Version : CKEditor Drop Down Menu Colors


HM666
09-07-2019, 08:40 PM
Anyone have any idea where to find the css for the area pictured in the screen shot? The drop down of the editor is the only thing that I still need to change and I've tried changing the core css for the editor to no avail.

Things I've tried already include:

1. Changing the css in the ckeditor core files (editor.css, etc.) The files found in this path: clientscript/ckeditor/skins/kama/

2. I've tried adding various things in my additional.css within the template and using !important.

I cannot seem to find the right combo to change this to how I want it.

Here is what I have in my additional.css file that pertains to the editor:

span.cke_skin_kama {
border:1px solid #5a022b !important;
}

/* Background Color for CKEditor */
.cke_skin_kama .cke_wrapper {
background:{vb:stylevar postbithead_background} !important;
border:1px solid #5a022b;
}

/* Background Color for CKEditor Buttons (Note, this may be too dark for some styles. If so you can delete this one.) */
.cke_skin_kama .cke_editor .cke_rcombo a,
.cke_skin_kama .cke_toolgroup {
background: #f70777 !important;
}

/* Background Color for CKEditor Hover Link*/
.cke_skin_kama a:hover {
background: #eee !important;
}

That code works fine in the skin, but its just that drop down that I'm having serious issues with.

napy8gen
12-11-2019, 02:16 AM
Put below css into this file:
/clientscript/ckeditor/skins/kama/editor.css


body.cke_panel_frame {
background: #000;
}
ul.cke_panel_list {
background: #ffff0a;
}
.cke_panel_listItem a {
border: 1px solid #00BCD4;
}
.cke_panel_listItem.cke_selected a {
border: 1px solid #f37600!important;
background-color: #ff0700!important;
color: #fff!important;
}
.cke_panel_listItem a:hover {
border: 1px solid #f37600!important;
background-color: #ff0700!important;
color: #fff!important;
}