I'm using WYSIWYG API with CKeditor, and when I set the CKeditor profile to use the theme css, the default pink background is used for the editor body. Other theme-configurable settings are also not used (font type).

This is basically the same issue as #299752: Text Field background different than theme colors, but a new ticket seems appropriate. Can using the theme settings for WYSIWYG be supported by the theme? That would be great...

(Or alternatively, what would be the best way to tell CKeditor about the correct css? Copy the relevant styles into a separate stylesheet and point CKeditor to this?)

Comments

ar-jan’s picture

ar-jan commented
Version: 7.x-1.0-beta2 » 7.x-1.0

Version.

Jeff Burnz’s picture

Jeff Burnz commented
Category: feature » bug

I'll need some time to test this out before making a recommendation, so just subscribing for now. Marking as a bug report, this is a bit of a pita and should be fixed.

Adam Woodbeck’s picture

Adam Woodbeck commented

You can modify the style of the CKEditor's body tag using the following CSS:

body.wysiwygeditor {
  background-color: #ffffff;
  background-image: none;
}

That will set the background color to white and remove the pink gradient background image.

I created a sites/all/themes/pixture_reloaded/css/changes.css file and added a "stylesheets[all][] = css/changes.css" entry to the pixture_reloaded.info file. I'm not sure if this is the best place for the CSS but it works for my purposes.

Jeff Burnz’s picture

Jeff Burnz commented

I should probably just add that to the theme by default, makes sense - Adaptivetheme is adding that class to the body (only works with WYSIWYG module) anyway, so we should take advantage of it.

ar-jan’s picture

ar-jan commented
Version: 7.x-1.0 » 7.x-2.x-dev
ar-jan’s picture

ar-jan commented

Ah, I see this was already present, but it looks like now the problem is back because I changed body to html in colors.css: #1323608: Background image on body causes respond.js to crash IE8.

Jeff Burnz’s picture

Jeff Burnz commented

OK, I'll have to update the CSS to account for moving the body image, so its a minor regression. Cheers.

grahamshepherd’s picture

grahamshepherd commented
Version: 7.x-2.x-dev » 7.x-3.0-rc1

This also applies in 7.x-3.0-rc1.

#3 CSS suggestion above doesn't work for wysiwyg tinymce, which applies color.css to the tinymce <html> tag within an <iframe>.
In tinymce there are no attributes to pick up the <html> tag, nor does CSS seem to recognise <html> as a child, descendent or sibling of anything, including an <iframe>.

robertgarrigos’s picture

robertgarrigos commented
Version: 7.x-3.0-rc1 » 7.x-3.x-dev
Issue summary: View changes

I'm still having this same problem with latest dev version. Has this been fixed?

robertgarrigos’s picture

robertgarrigos commented

Sorry, I've just seen this (https://www.drupal.org/node/1000274#comment-4039392) which would count as a fix to it.