By leenwebb on

I love the setting in FCKEditor that says "Use theme CSS", because it makes editing text so much easier ("Oh yeah, H1 is the big pink letters, and h2 is the smaller blue ones!").

But! The site I'm working on has an overall background of grey, with a text-container background of white. FCKEditor grabs the grey background for the editor, which is no good. Is there any way to tell the editor, Hey, use the theme's CSS *except* use a white background instead?

(I'd like to avoid having a whole duplicate-except-for-background CSS file for FCK, since I'm sure it would get out of synch in no time flat.)

Thanks!
Eileen

⋅ Categories: Drupal 5.x

Comments

bastoubach’s picture

bastoubach commented

did you find an answer?

leenwebb’s picture

leenwebb commented

Hmmm, I never did. I did find, however, that even using the theme CSS often doesn't work for me because the CSS is all smart (TOTALLY not written by me) and is set to only apply inside certain id's. So maybe H1's are re-styled to be pink, but only inside the id of #content, and so they don't show up in the editor as pink.

So I am creating a duplicate of the theme CSS and pointing FCK to that. As a side-note, I have spent some time learning to pare down the FCK options so that my duplicated CSS only has a few styles in it (p, div, h1, h2, h3, but not h4-6 because who uses those?). So those two things together end up pretty much solving this issue for me.

leenwebb’s picture

leenwebb commented

Got it!

At least for the simple issue of changing the background image, put this in your fckeditor.config.js:

// special background for editor
FCKConfig.EditorAreaStyles = "body{background:#F7F7EF;}";

(You may have to clear your browser cache to get the new style to show up.)

bastoubach’s picture

bastoubach commented

Awesome, thanks!

jordanyerman’s picture

jordanyerman commented

This worked a treat- also my first time messing with a .js file. Thanks for the help.