No announcement yet.

Change the font colour in CKEditor

First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Change the font colour in CKEditor

    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.

       /* 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).

     <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.

    yeah sure heres the comparison shots...

    fwiw its a base of vbstyles greenfox design...

    first is editor while making a post>> Click image for larger version

Name:	messengercss.png
Views:	72
Size:	26.8 KB
ID:	1366

    next is the messenger chat not just regular pm, but the popup added after 5.2.3 i believe>> Click image for larger version

Name:	messengercss_popup.png
Views:	84
Size:	21.5 KB
ID:	1367

    pretty much just need the editor bg to be the same dark gray instead of the white
    Last edited by IggyP; 09-27-2016, 12:36 AM.


    • IggyP
      IggyP commented
      Editing a comment
      oops wrong topic aha ;P

    Hey Felix, thanks for pointing me to this file. I notice though that when you edit this class the editor's placeholder text goes away. Have you noticed this? I added a font-size statement to that class since the default was too small and it doesn't seem like you can change that via stylevar.


    EDIT: Changing the cke_editable font-size doesn't mess with the placeholder if you don't munge the file, which I did. Got that sorted.

    What I'm wondering now is you anyone knows how to adjust the size of the placeholder text? You know the "Write Something..." phrase.
    Last edited by Daryn; 03-21-2017, 01:00 PM.


      Originally posted by Daryn View Post
      What I'm wondering now is you anyone knows how to adjust the size of the placeholder text? You know the "Write Something..." phrase.
      .b-editor__placeholder {
          font-size: 16px;