My theme has on the body tag a colored background image

when using wysiwyg module this background is also in the text field while I would expect the the text field background to be white....

the iframe resets the background color but it does not reset the background image.

Comments

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Closed (works as designed)

This is the expected behavior if you have set the editor to use the stylesheets from your Drupal theme.
I recently explained this in more detail in #636818: TinyMCE - "Editor default CSS".
That issue deals with TinyMCE but the principle is the same for all editors. Not all editors have a special class or id on the iframe's body tag though. In those cases it's probably easier to use the 'Define CSS' option and include the stylesheets from your theme manually, along with an extra stylesheet containing overrides to make the body tag have the same styles your rendered nodes do.

bwynants’s picture

bwynants commented

thanks for this info! This will definitely help me out!

tahiche’s picture

tahiche commented

I was using "Defin)e CSS" so that it would use my theme´s CSS while editing, which is nice because it shows more accurately how the real outcome will be.
But unwanted styles such as background color where showing in the editor (as espected). My theme´s css body and html styles were overriding whatever i set for iframe (logically).
My solution was to define 2 CSS files on the CSS Path field (see the comma...):

/sites/all/themes/mytheme/css/themestyle.css , /sites/all/themes/mytheme/css/ckeditorfix.css

That way the editor loads both and on the second one, which is exclusive for the editor you can set, for example:
html,body{
background-color:#FFF;
}
Hope it helps someone.