tinymce, background color

Posted by jbjaaz on August 4, 2006 at 2:18pm

Hello all. This is a tinymce customization question.

The module is set up to pull the css from the theme. The sites layout features a blue background with the content over a white background. In tinymce, the background is the blue background. How can I override the background of tinymce to be white?

~john

Comments

body.mceContentBody

Posted by zroger on August 4, 2006 at 2:38pm

tinyMCE gets loaded into an iFrame, therefore it is its own html page. The body of the page has a class of mcdContentBody so you can put something like this in your style.css:

body.mceContentBody {
  background: #fff;
  color: #000;
}

Most of the templates I create have a background color or image tile on the body, so this has become part of my standard style.css.

Yes

Posted by zroger on August 4, 2006 at 3:45pm

You can control the entire style of the tinyMCE contents, including html elements, using this method.
For example:

body.mceContentBody{
  background: #fff;
  color: #000;
  font-size: 16px;
}

body.mceContentBody a:link{
  color: #ff0000;
}
...

thanks

Posted by jbjaaz on August 4, 2006 at 7:16pm

Worked awesome. Thanks!!!!

~John

My background is limited to content in firefox?!

Posted by Venim on June 15, 2007 at 8:52am

I apply the style to my theme's style.css but somehow, only the lines in which there is information entered take the background in firefox (works in IE). My CSS contains following:

html, body {
margin: 0;
text-align: center;
font: normal 12px arial, helvetica, sans serif;
background-image: url('images/playmo_retro_background.jpg');
color: #000000;
}

...

body.mceContentBody {
background: #e8e7da;
color: #000000;
text-align: left;
font: normal 12px arial, helvetica, sans serif;
}

What should I do to make it look ok in firefox as well?

Thanks!

what's getting overridden, what's not

Posted by texas-bronius on July 17, 2007 at 3:37am

Venim-
In your generic css, you're setting background-image (only image) across all instances of body (html is redundant here I believe). Then, you're specifically setting background(-color) (only color) on body.mceContentBody. The background-image is still here. Try adding a url() to make it:

body.mceContentBody {
  background: #e8e7da url();
}

Does that help?
--
..happiness is point and click..

--
..happiness is point and click..
http://www.bronius.com

rz rules

Posted by ha5bro on January 10, 2008 at 7:57pm

Thanks a lot for this fix, wasn't happening for me for whatever reason.

[[[ ALL HAIL THE ALMIGHTY GOOGLEBOT ]]]

You can also set the width here

Posted by drowlflood on August 18, 2007 at 11:56pm

Just wanted to add, that if you're specifying a width or min-width for the body tag, you'll find that the editor's contents will spill off to the right and add a horizontal scroll bar to the iframe.

To prevent this, just add a corrected value to the "body.mceContentBody" declaration, like:

body {
  margin: 0; padding: 0;
  color: #494949;
  background: #054778 url(images/body.png) repeat-x 50% 0;
  min-width: 920px;
}

body.mceContentBody {
  color: #000;
  background: #FFF;
  min-width: 720px;
}

I tried

Posted by idflorin on January 10, 2008 at 9:38pm

body.mceContentBody {
  color: #000;
  background: #FFF;
  width: 220px;
}

body.mceContentBody {
  color: #000;
  background: #FFF;
  width: 300px;
}

body.mceContentBody {
  color: #000;
  background: #FFF;
  min-width: 220px;
}

body.mceContentBody {
  color: #000;
  background: #FFF;
  min-width: 620px;
}

and nothing works
Image

for this website Fashion Directory using zen theme

with those 2 styles
zen_red.css and layout.css

no one

Posted by idflorin on January 11, 2008 at 8:06pm

no one ? nothing ?

I'm stumped... are you

Posted by ha5bro on January 17, 2008 at 9:30pm

I'm stumped... are you loading that style after your main body style has been declared? I don't see why that would matter particularly but you might want to check it.

[[[ ALL HAIL THE ALMIGHTY GOOGLEBOT ]]]

Thanks bcswebstudio. I

Posted by manop on January 28, 2009 at 8:03pm

Thanks bcswebstudio. I forgot to add "url()". That saves my day.