By aireq on

I'm having a problem with my background image. I'm using a tweaked version of the Barron theme. The background image is a black and red bar that shows up at the top of the window. This is fine on the site because the menu text is white. However this black and dark red bar is also showing up in the image selector window, as well as inside FCKeditor. This is a problem because the first few lines of text I end up having to edit black text on a black background, and with the image chooser I can't read any of the messages at the top of the window.

Eric

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

sounds like some css is being overridden. hard to tell without a link to your site. Use firefox browser with firebug addon to inspect the elements and see what css is being called for clues

dnewkerk’s picture

dnewkerk commented

This happens rather often with WYSIWYG editors... usually the background color and/or image of the theme gets used in the editor's box, since it is usually a full embedded HTML window and since it uses the theme's style sheet, it inherits the same background color/image for the body.

Since I'm facing the same thing (again) tonight for a client (though using TinyMCE in my case), I will let you know if I solve it. It's not hard to fix "as long as" you can latch onto the right part of the HTML or a parent class/ID in the editor... though my experience is it can be hard to actually get the right thing so the editor's body is affected.

As a temporary fix you can have FCKEditor use the "Editor default CSS" option, though this isn't ideal since its rather lousy looking.

dnewkerk’s picture

dnewkerk commented

Here's the fix for TinyMCE (put in your own style.css file):

body.mceContentBody {
  background: #fff;
  color: #000;
  padding: 0 10px;
}

I'll see if I can do the same in FCKEditor and let you know.

dnewkerk’s picture

dnewkerk commented

Hm sorry can't figure it out yet. It is ultra simple in TinyMCE since its body tag uses a unique CSS class. In FCKEditor though, there is no unique class, and it is also much more deeply nested inside a web of multiple HTML documents inside of yet more HTML documents. I can't seem to find the proper CSS to accurately select its body tag... and for some reason the code's so nested it seems to even be taxing Firebug trying to dig through it (slowing my browser and spiking my CPU haha).

My best advice is to use the "Define CSS" option instead. Then make a separate .css file, and in it define the various simple rules you want to use for formatting the look of content displayed in FCKEditor. Point it to this file with the "CSS path" option.

kdmarks’s picture

kdmarks commented

Found a pretty easy solution for my case: I had a background image on the body tag of my page.tpl.php. I added the classes ".not-front" and ".front" to the style, so now the background image is only added to a body tag with those classes, which FCKeditor, TinyMCE, IMCE, etc., won't have.

body.not-front, body.front {
  background-color: #5e5e5e;
  background-image: url(../images/background.gif);
}

Hope this helps!

williecoetzee’s picture

williecoetzee commented

I've tried many things. You should find a solution here: http://drupal.org/node/209482.

Try this first:

Simply go to "admin-->settings-->fckeditor-->edit (the used profiles)" and under the section "CSS" choose "FCKeditor default" instead of "use theme css".

It worked for me.