For a very long time now I have been annoyed with the fact that ever since I upgraded to vB5 my compose message box has been black text on dark grey (almost black) background. One can use the font color editor, but that is a whole extra step and confusing to users.
My site uses a dark theme with yellow accent so I wanted the text default to be YELLOW.
I tried everything from the Site Editor, to editing the Header, Global CSS, adding code to the CSS Additional, and nothing affected the font color.
Not even using the IMPORTANT declaration had an affect.
Finally, I just let it go for a while.
Now however, I've learned more about CSS and decided to tackle the issue once and for all.
I ran a website Inspection of all CSS elements and narrowed it down to just a few lines of code (out of more than 50,000).
cke_editable is the culprit here.
I hunted through every piece of CSS code and found nothing.
In the CSS output, it showed, INLINE CODE .cke_editable{cursor:text}
As I learned before though, setting the CLASS ID or adding code to it had no effect.
Inline code means that no .css file exists nor does it reside within the CSS Templates.
I researched CKE_Editable to discover it is a 3rd party Java code which powers the WYSIWYG.
From within the inspector data window, if I added the color:yellow value, nothing happened because the cursor:text nullified it.
If I replaced cursor:text with color:yellow, it appeared correct within the browser. So were in the @!#$ was the code .cke_editable{cursor:text} hiding and being generated?
Well, my research of CKE told that it had its own separate .js file to generate theme code, and it was located by default in the root htdocs folder under the sub folder JS.
This is outside the vB Forum code but it is still being called upon. Ah ha!
110 .js files in that folder
I tried setting, editor, theme... Nodda. So I ran a GSAR for .cke_editable{cursor:text}
8 files got hits. Getting closer.
Every one with a hit was titled ckeditor-rollup-51x.js I selected ckeditor-rollup-519.js as my site is currently vB5.1.9
Low and behold, there was CKEDITOR.addCss(".cke_editable{cursor:text}
Only a single occurrence in the entire file.
I changed it to CKEDITOR.addCss(".cke_editable{color:yellow} and now all new message edits are yellow text on dark gray
The .JS takes priority over CSS which is why no CSS change had any affect. CKEditor is akin to an iframe.
The CKEDITOR.addCss(".cke_editable{cursor:text} code was depreciated after the last vB5.0.x release.
Theme developers have failed to update ckeditor-rollup-519.js to reflect this change in vB5.1.x
So, in short, if you are having trouble changing the message editor text color in a vB5.1.x theme, try editing the ckeditor-rollup-51x.js file.
It should be noted that many theme aspects of the WYSIWYG are controlled by that file and not vB itself.
Also, with new upgrades, ckeditor-rollup- files and edits will have to be redone.
My site uses a dark theme with yellow accent so I wanted the text default to be YELLOW.
I tried everything from the Site Editor, to editing the Header, Global CSS, adding code to the CSS Additional, and nothing affected the font color.
Code:
/* Start Fix editor font color */ .cke_editable { Color: yellow!important; } /* End Fix editor font color */
Not even using the IMPORTANT declaration had an affect.
Finally, I just let it go for a while.
Now however, I've learned more about CSS and decided to tackle the issue once and for all.
I ran a website Inspection of all CSS elements and narrowed it down to just a few lines of code (out of more than 50,000).
Code:
<body spellcheck="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders js-vbulletin-has-placeholder-events" contenteditable="true">
cke_editable is the culprit here.
I hunted through every piece of CSS code and found nothing.
In the CSS output, it showed, INLINE CODE .cke_editable{cursor:text}
As I learned before though, setting the CLASS ID or adding code to it had no effect.
Inline code means that no .css file exists nor does it reside within the CSS Templates.
I researched CKE_Editable to discover it is a 3rd party Java code which powers the WYSIWYG.
From within the inspector data window, if I added the color:yellow value, nothing happened because the cursor:text nullified it.
If I replaced cursor:text with color:yellow, it appeared correct within the browser. So were in the @!#$ was the code .cke_editable{cursor:text} hiding and being generated?
Well, my research of CKE told that it had its own separate .js file to generate theme code, and it was located by default in the root htdocs folder under the sub folder JS.
This is outside the vB Forum code but it is still being called upon. Ah ha!
110 .js files in that folder
I tried setting, editor, theme... Nodda. So I ran a GSAR for .cke_editable{cursor:text}
8 files got hits. Getting closer.
Every one with a hit was titled ckeditor-rollup-51x.js I selected ckeditor-rollup-519.js as my site is currently vB5.1.9
Low and behold, there was CKEDITOR.addCss(".cke_editable{cursor:text}
Only a single occurrence in the entire file.
I changed it to CKEDITOR.addCss(".cke_editable{color:yellow} and now all new message edits are yellow text on dark gray
The .JS takes priority over CSS which is why no CSS change had any affect. CKEditor is akin to an iframe.
The CKEDITOR.addCss(".cke_editable{cursor:text} code was depreciated after the last vB5.0.x release.
Theme developers have failed to update ckeditor-rollup-519.js to reflect this change in vB5.1.x
So, in short, if you are having trouble changing the message editor text color in a vB5.1.x theme, try editing the ckeditor-rollup-51x.js file.
It should be noted that many theme aspects of the WYSIWYG are controlled by that file and not vB itself.
Also, with new upgrades, ckeditor-rollup- files and edits will have to be redone.
Comment