I'm using FCK in a Drupal 5.5 site ( with a theme (Golden_Hour) that has a very dark background. This is showing in the FCK textarea, and all attempts to adjust the various .css files cannot change it.

The background in the FCK textarea box IS coming from the theme. Any clues how I can over-ride this? The FCK CSS defines 'body' but for some reason I can't get this to over-ride the theme body def.

FCK is functional but it is very difficult to read black text on a dark background. LOL!

=Alan R.


jadwigo’s picture

Status: Active » Closed (works as designed)

make a copy of the themes css and change the text colors accordingly, use that css as the custom css in your config.

HenrikWL’s picture

Another solution is to attach the background to a wrapper <div> instead. This way you don't have to have two different stylesheets. I don't know how FCKEditor displays its HTML, but it's bound to have a body element, so any styling you do to your body element also gets reflected in the FCKEditor.

alanvee’s picture

Title: Textarea background » Textarea background - Solved!
Status: Closed (works as designed) » Closed (fixed)

Thanks, jadwigo and HenrikWL, but the REAL answer is:

(I found this in the FCK developers Wiki) In the fckconfig.js file is a parameter named "FCKConfig.BodyId=''; I added an additional style in the theme CSS called #fckback, and set it to the color I wanted. Then I changed the param to "FCKConfig.BodyId='fckback';

After a cache-clear -- volia! The correct textarea color appeared!

=Alan R.

FreeFox’s picture

Alanvee, your the best. Works great!!!

Thanks a lot.

elmofromok’s picture

There is also a setting in the FCKEditor config page to use the fck default instead of the theme css, this will correct this problem and use a white background.

romunov’s picture

elmofromok's solution worked for me.

tomdisher’s picture

I registered just to make a post to thank you. I sorted through every single css file in the fck folder and couldn't figure this out.

wadley0’s picture

Note: alanvee's solution can be implemented from within drupal.

Administer > Site configuration > FCKeditor

[profile] edit > Advanced options

paste the code into the 'Custom javascript configuration:' section.


then add your css for fckback.

mrtasteit’s picture

hi all - new to this, and neither alanvee's nor wadley0's suggestions are working for me. it basically "whited-out" my entire fck editor.

Is this the correct css:

#fckback {

or even this:

#fckback {

I will now try elmofromok's solution...


mrtasteit’s picture

elmofromok's solution was painlessly easy - i appreciate everyone's efforts though. getting my hands dirty through making mistakes is the best way to learn!

goosemoose’s picture

alanvee method works great, thanks. I'm hosting multiple sites with many themes so this method is much cleaner.

wadley0, I couldn't find an advanced option so I just edited the file manually.

andreiashu’s picture

@alanvee: THANKS !!!

RedMtn’s picture

Just for clarification on Elmofromok's great solution (if you're Drupal Challenged as I am), go to the
Administer » Site configuration >> fckeditor page within your site, then edit both Profiles, under the "css" section. The first option there is "Editor CSS", and switch it to "FCKeditor default".


lodey’s picture

Just to help anyone else that is reading this thread to solve the background image problem with FCK. The answer about pointing the config file to a new style is spot on - but you dont need a new style to do it - just a quick edit of the modules/fckeditor/fckeditor.config.js file with the right wording and the problem is solved.

If as mentioned above you just set FCK editor to use a default style sheet etc - the content addition wont be accurate to its final output where possible, i.e. h1 sizes, font types etc - so by doing the below and simply over riding the background style you will keep all other styles.

I have copied here from the link at the bottom :

All we need to do is to tell FCKeditor to use that styles:

* Edit FCKeditor profile, in the "CSS section" choose use theme css
* In modules/fckeditor/fckeditor.config.js, add the following:

FCKConfig.BodyId = "primary";
FCKConfig.BodyClass = "singlepage";

* Now our body inside of the FCKeditor gets the right ID.
* Well we still have the wrong background and text alignment. To fix this, add another line in fckeditor.config.js:

FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;}";

in newer versions of marinelli theme we may also need to adjust the font size, so if you need to, use the following code instead:

FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;font-size:0.8em}";

* Remember to clear your browser's cache after applying changes to javascript files.

Everyone should read this - it is an up to date and exact guide (this area has some great other info)

taite11’s picture

#14 is pretty close. But in Drupal 6.10 the bullets don't show in the editor anymore. I'm guessing the bullets aren't the only thing that won't show anymore either.

xalexas’s picture

elmofromok, just to say thanks. I have lost few hours diving into various fckeditor config files until I found this painless solution. Why I didn't look there in first place?

wadley0’s picture

Taking a leaf from Lodey, I'm changing my recommendation slightly...

I'm now using the Custom javascript configuration built into the FCKeditor module, to change the background color directly. You then don't have to change your style sheets to account for the editor. Also, it doesn't require making changes to FCK config files that you would have to change every time you upgrade FCK.


Administer > Site configuration > FCKeditor

[profile] edit > Advanced options

paste the code into the 'Custom javascript configuration:' section.

alex.ihlo’s picture

do you know what Javascript would solve this for 6.x? I tried the code you pasted and it left the bg the same, and took most buttons away

wadley0’s picture

The code I posted was for 6.x. I failed to notice that this post is for ver 5.x. (Which could explain why it wasn't working for anyone else. oops.)

illymahn’s picture

I've just started hacking FCKEditor 2.6.5 and so I'm not sure if this is obvious or not or there might be an easier way... Hope this helps.

I too was also wanting to apply site styles to the editor, which I sorted from posts above... and other sites ....thanks.

Solution I found : this example uses 2 style sheets with nested divs for the page content
var css = new Array(2);
css[1] = '../../css/mod.css';
// Assigns the css array to EditorArea
FCKConfig.EditorAreaCSS =css;

var diva = new Array(2);

//set up main div to trigger stylesheets in editor
FCKConfig.BodyId = diva[1];

I found this only to be a visual solution though - As long as you work within pre-defined css areas everthing was fine.
I then looked into adding and manipulating the styles - Wanting to create new content sections and specify as per the Website CSS.

The styles button - defined in >> fckconfig.js worked fine but added verbose inline style data to the page... not what I wanted

I dug deeper and found the FORMAT definitions in the FCKConfig.CoreStyles section and the fact you can define Attributes like "class" etc.

So I went through and defined the format element options like so :
FCKConfig.CoreStyles =
'h1' : { Element : 'h1', Attributes : { 'class' : 'ContentTitle18' } },
'h2' : { Element : 'h2' Attributes : { 'class' : 'ContentSubtitle14 } },
// Usr Defined Element
'SubTitle14' : { Element : 'span', Attributes : { 'id': 'myelement', 'class' : 'ContentSubTitle14' } },

}etc.. also allows for user defined elements as well

You must also make sure your definitions are listed in :
FCKConfig.FontFormats = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;SubTitle14' ;

CSS entry - for user defined element
eg: span#myelement { font-size: 14pt; color: #009900; }

Allowed me to then apply standardised css formatting to the HTML from the editor making the editor work to my definitions and not the other way around.

syscrusher’s picture

Shazam! #17 worked perfectly for me, and is a great choice of method because it doesn't involve patching any of the files in the FCK editor module directory -- important for shared-install sites. Thanks!

By the way, I tested this under Drupal 6.15 with FCKeditor version

Anything’s picture

Thanks, worked perfectly.

dude4linux’s picture

If you're developing a theme, you can avoid the problem by adding the following to your theme.css file.

/**Fix FCKeditor background **/
background: #fff;

Use any appropriate color to match your theme.