By Karlheinz on

I'm having a strange CSS problem with the WYSIWYG module. For most of the WYSIWYG libraries (I've tried FCKeditor and TinyMCE), the way they work is to replace the <textarea> tag with an iframe that contains an entirely different HTML document. That is, seperate <head>, <body>, etc.

The problem is that it inherits the CSS background from the parent HTML. In my case, this is a background image. I would like to get rid of this image, and also have the background be the same as a textarea background (which is NOT the page's background color).

Now, I've managed to override the background using this CSS:

iframe,
  iframe html,
  iframe > html,
  iframe body,
  .mceLayout,
  #tinymce,
  .mceContentBody {
    background-color: #333333;
    background-image: none;
  }

...but there's a big catch. Before I type anything, the iframe's HTML content is empty - so the background stops well before the iframe does. In other words, there's an empty line's worth of #333333 background, and the rest is the background image from the parent page.

Anyone know how to solve this? I've been wracking my brains for days.

⋅ Categories: Drupal 6.x

Comments

elijah lynn’s picture

elijah lynn
Location Portland, Oregon
commented

Subscribing. I am having a tough time getting Wysiwyg+TinyMCE to recognize my local.css that I specified from Acquia Slate. Hoping I might learn something by watching this topic.

-----------------------------------------------
The Future is Open!

Karlheinz’s picture

Karlheinz commented

I think I might have found the solution.

First, you have to edit the default CSS that your editor uses. This is usually in sites/all/libraries. Where it is specifically, depends upon your WYSIWYG editor. FCKeditor has a couple: /fckeditor/editor/css/fck_editorarea.css and /fckeditor/skins/default/fck_editor.css are the main ones. I just combined these into one big CSS file.

Don't save over the original CSS file(s). Instead, save it as a CSS file in your theme directory, e.g. sites/all/themes/yourtheme/wysiwyg.css.

Next, to to Administer -> Wysiwyg -> [Input format] edit -> CSS. Set the WYSIWYG profile's "Editor CSS" field to "Define CSS": In the "CSS Path" field, enter the path to the CSS file using the "%t" token (e.g. %t/wysiwyg.css).

That way, you can distribute the custom CSS file with your theme, and if you upgrade your WYSIWYG editor, you won't have to re-code all your CSS specs.

This works with FCKeditor. I haven't tried it yet with TinyMCE. It should work, because (I think) the WYSIWYG module loads the CSS through the iframe, not through the Drupal page in which it is embedded. I could be wrong about this, though.

EDIT: You should also be able to define your own custom button icons this way. Does anyone know of any "Word-style" icons that are geared towards a dark background? Or would I have to create my own?

-Karlheinz

bostonclimber’s picture

bostonclimber commented

Thanks for the instruction for the custom CSS configuration. To make it to take effect, I needed to clear the cache. In fact, every time I modify the custom CSS, I need to clear the cache. Hope this helps someone who is facing the same issue.