I use Ckeditor and the background of the CKeditor is darg cyan when I use it with deco theme. At this page they say that I need to set two variables

http://drupal.ckeditor.com/tricks

But I don't know the values to put on it to get it working right. It seems that these inputs rely on the theme I'm using, in this case, Deco.

Comments

Deepika.chavan’s picture

Deepika.chavan commented

Hi,
In modules/ckeditor/ckeditor.config.js , following code is used to set 'class' and 'Id' to the body of ckeditor. You can use any value for that. 

  /**
   * CKEditor's editing area body ID & class.
   * See http://drupal.ckeditor.com/tricks
   * This setting can be used if CKEditor does not work well with your theme by default.
   */
  config.bodyClass = '';
  config.bodyId = '';

In my case I used : 

  config.bodyClass = 'deco-cke';
  config.bodyId = 'deco-cke-body';

Css to change the background color of body of ckeditor :

 #deco-cke-body {
 background : #FFFFCC;
 text-align: left;
 font-size: 0.8em;
}

Rgrds,

Deepika Chavan

Enzman’s picture

Enzman commented

In my case, I found it easiest to edit contents.css, found under the Libraries/CKEditor directory.

You can see from the full code that I change the line to:
background-color: #040404;
as I wanted the edit tool to always appear black - as the entire site had white text throughout. Of course you can change it to any colour you like.

Full code:
/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

body
{
/* Font */
font-family: Arial, Verdana, sans-serif;
font-size: 12px;

/* Text color */
color: #222;

/* Remove the background color to make it transparent */
background-color: #040404;
}

html
{
/* #3658: [IE6] Editor document has horizontal scrollbar on long lines
To prevent this misbehavior, we show the scrollbar always */
_overflow-y: scroll
}

img:-moz-broken
{
-moz-force-broken-image-icon : 1;
width : 24px;
height : 24px;
}
img, input, textarea
{
cursor: default;
}

c31ck’s picture

c31ck commented
Version: 6.x-1.1 » 7.x-1.x-dev
Component: Miscellaneous » Code
Status: Active » Closed (fixed)

Fixed in 7.x-1.x-dev and 6.x-1.x-dev by fixing #433516: TinyMCE background is black

RAWDESK’s picture

RAWDESK commented
Issue summary: View changes

I had to change core/modules/ckeditor/css/ckeditor-iframe.css in order to have another background color applied :

iframe.cke_wysiwyg_frame html {
  background-color: lightgrey;
}

body {
  font-family: Arial, Verdana, sans-serif;
  font-size: 15px;
  color: #222;
  background-color: lightgrey;
  margin: 8px;
}

The iframe was always overruling any theme customized overrides, even from ckeditor library plugin.
Running on D8.3.7