By jbjaaz on

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

⋅ Categories: Drupal 4.7.x

Comments

zroger’s picture

zroger commented

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.

donkilo’s picture

donkilo commented

Can you also change the default font size in that section of the style.css?

The Digital Revolution

zroger’s picture

zroger commented

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;
}
...
jbjaaz’s picture

jbjaaz commented

Worked awesome. Thanks!!!!

~John

Venim’s picture

Venim commented

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!

texas-bronius’s picture

texas-bronius commented

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..

--
http://drupaltees.com
80s themed Drupal T-Shirts

ha5bro’s picture

ha5bro commented

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

drowlflood’s picture

drowlflood commented

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;
}
idflorin’s picture

idflorin commented 
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

idflorin’s picture

idflorin commented

no one ? nothing ?

ha5bro’s picture

ha5bro commented

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.

manop’s picture

manop commented

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