change content background in TinyMCE

[aliceerickson]

Does anybody out there know how to change the background for the content box in TinyMCE? It displays the page background, which certainly isn't ideal. I have a couple of page designs; one uses black as page background, with a white content table, the other has a repeated background. What I'd like to do is just hardwire TinyMCE to show a white background no matter what the template has. This has to be a simple change somewhere, but where?

[Ted]

Go into the options for TinyMCE (under modules in 0.9.2, or extensions->tinymce in 0.10beta4).  There is an option to strip background colors from the css.  That should do it...

(see, we're already a step ahead of ya )

[aliceerickson]

Hi Wishy,

Yeah! You guys are way ahead of me. I should have found that myself. Only problem is that, while that works fine for background colors, it doesn't work for background images. Any way to handle that?

[Ted]

I just committed this change to svn.

Open up stylesheet.php.  At the very bottom, you'll see:

Code: Select all

$css = preg_replace('/(\w*?background-color.*?\:\w*?).*?(;.*?)/', '\\1transparent\\2', $css);

Right below that, add:

Code: Select all

$css = preg_replace('/(\w*?background-image.*?\:\w*?).*?(;.*?)/', '', $css);

[pkpk]

I tried this solution (setting to true and adding the code as suggested) and my background image is still showing.

Any idea why it is not working?
Thanks
PK

[Ted]

It probably means that the background image is set in the body tag, which isn't quite as easy to handle.  Might want to move that definition into a stylesheet to make it a little more flexible for you.

[westis]

Well, I have the same problem when I have used the following CSS in the body selector in the attached stylesheet:

Code: Select all

background: #ccc url(image.jpg);

Is the current solution only replacing background-image and background-color, but not an image inserted like above?

Would also be great to remove text-align from the body selector the same way, as I always have text-align: center in the body selector (to center a fixed width page in older browsers that don't recognize margin: auto). That means that all my content in TinyMCE is also center-aligned, which makes it a bit difficult to edit...