More on CKE styling using CSS.

[Felix2]

See also,

http://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-javascript-hacks/1167-change-the-font-colour-in-ckeditor

http://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-javascript-hacks/584-how-to-add-custom-font-in-ckeditor-in-vbulletin-5

Add to css_additional.
This has been tested on vB5.2.4

/* ----------------- Start CKE Changes ----------------- */

/* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
Search for cke_wysiwyg_frame, around line 1087
Find allowTransparency:"true"
and change it to allowTransparency:"false"
Save.  You will need to do this with every upgrade.
NOW, you can change values using CSS below. */


/* Start Change Editor Background */
.cke_WYSIWYG_frame.cke_reset {
    Background-color: #202020;
}

.b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
    background: #202020;
}
/* End Change Editor Background */

/* Start Change Editor Toolbar Background */
.b-editor .cke_top {
    background: #404040 none 0 0;
}
/* End Change Editor Toolbar Background */

/* Start CKE Content Panel */
.b-content-entry-panel--autosave {
    background-color: #222432;
}
/* End CKE Content Panel */

/* Start CKE text */
body {
    font: 13px 'Noto Sans',sans-serif;
    color: #919ced;
}
/* End CKE text */

/* ----------------- END CKE Changes ----------------- */

[Felix2]

More progress has been made. Sure would be nice if we could edit our own posts...

I now have control over most of the CKE elements users would want to change via CSS.
It was a little challenging as vB5.2.x has added new CLASS ID's and I didn't want separate codes for ever version.
The code below has been tested upon vB5.1.2, 5.1.9, 5.2.2 and 5.2.4
The results differ slightly, but it all works as expected.

/* ----------------- Start CKE Changes ----------------- */

/* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
Search for cke_wysiwyg_frame, around line 1087
Find allowTransparency:"true"
and change it to allowTransparency:"false"
Save.  You will need to do this with every upgrade.
NOW, you can change values using CSS below. */



/* Start Advance Editor is Default */
.b-editor--cke-toolbar-is-hidden .cke_top {
display: inline-block;
}
/* End Advance Editor is Default */

/* Start CKEditor Font Override */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    src: local('Orbitron-Bold'), url(/Orbitron.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }
/* End CKEditor Font Override */


/* Start Change Editor Background */
.cke_WYSIWYG_frame.cke_reset {
    Background-color: #202020;
}

.b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
    background: #202020;
}
/* End Change Editor Background */

/* Start Change Editor Toolbar Background */
.b-editor .cke_top {
    background: #404040 none 0 0;
}
/* End Change Editor Toolbar Background */

/* Start CKE Content Panel */
.b-content-entry-panel--autosave {
    background-color: #222432;
}
/* End CKE Content Panel */

/* Start CKE text */
body {
    font: 13px 'Noto Sans',sans-serif;
    color: #919ced;
}
/* End CKE text */

/* Start CKE buttons background */
/* Reccomended for dark theme and inverted JS/ckeditor/skins/moono/icons.png set. */
.cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
    background: rgba(17, 3, 36, 0.9);
}
.cke_toolgroup {
    background: #695995;
    background-image: linear-gradient(to bottom,#782ed4,#0f021b) !important;
}
/* End CKE buttons background */


/* Start open Editor colour */
.b-editor {
    background: #0B090F;
}
/* End open Editor colour */

/* Start Resize bar */
.b-editor .cke_bottom {
    background: #380E80;
}
/* End Resize bar */


/* ----------------- END CKE Changes ----------------- */

[Dyno]

Works on 5.2.4 . Tested

[Felix2]

Another small addition. Hover over effect.
Should work on all vB5.1.x-5.2.x

/* Hover */
a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active {
    background-image: -moz-linear-gradient(top,#984ef4,#2f123b) !important;
}

[glennrocksvb]

Why for Firefox only?

[Felix2]

Because it was 4am and I forgot to remove portion of the testing code I was using on various browsers :P
And because I can't edit my own posts

But you are correct, that does not have to be FF only. It was just for testing.

This is the present code, tested on vB5.1.x-5.2.4-

/* ----------------- Start CKE Changes ----------------- */

/* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
Search for cke_wysiwyg_frame, around line 1087
Find allowTransparency:"true"
and change it to allowTransparency:"false"
Save.  You will need to do this with every upgrade.
NOW, you can change values using CSS below. */



/* Start Advance Editor is Default */
.b-editor--cke-toolbar-is-hidden .cke_top {
display: inline-block;
}
/* End Advance Editor is Default */

/* Start CKEditor Font Override */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    src: local('Orbitron-Bold'), url(/Orbitron.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }
/* End CKEditor Font Override */


/* Start Change Editor Background */
.cke_WYSIWYG_frame.cke_reset {
    Background-color: #202020;
}

.b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
    background: #202020;
}
/* End Change Editor Background */

/* Start Change Editor Toolbar Background */
.b-editor .cke_top {
    background: #404040 none 0 0;
}
/* End Change Editor Toolbar Background */

/* Start CKE Content Panel */
.b-content-entry-panel--autosave {
    background-color: #222432;
}
/* End CKE Content Panel */

/* Start CKE text */
body {
    font: 13px 'Noto Sans',sans-serif;
    color: #919ced;
}
/* End CKE text */

/* Start CKE buttons background */
/* Reccomended for dark theme and inverted JS/ckeditor/skins/moono/icons.png set. */
.cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
    background: none;
}
.cke_toolbar {
    background-image: linear-gradient(to bottom,#202020,#020202) !important;
}
span[class*="cke_toolgroup"] {
    background-image: linear-gradient(to bottom,#1024c6,#03020b);
}
/* End CKE buttons background */

/* Start Button Hover */
a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active {
    background-image: linear-gradient(to bottom,#2cbfcb,#1b275d) !important;
}
/* End Button Hover */

/* Start open Editor colour */
.b-editor {
    background: #0B090F;
}
/* End open Editor colour */

/* Start Resize bar */
.b-editor .cke_bottom {
    background: #03021b;
}
/* End Resize bar */


/* ----------------- END CKE Changes ----------------- */

[willie53]

Been playing about with this one to suit my needs until moono-dark is avaiable hopefully on the next release of vb5.4.2 .
The top bit of the code that changes the background color to dark grey or black is not needed in this version of 5.4.2 alpha as it can now be changed with the new global pallette stylevars none the less i used parts of this code that i needed the result can be seen below.