When using a custom theme, sometimes it is necessary to tell FCKeditor to use the correct style.
Let's use as an example the marinelli theme.
By default, it is hard to create a page with FCKeditor: background color used by site and font color are too similar and it's very hard to read anything, text is aligned to the center:
http://drupal.fckeditor.net/tricks
Fortunately, there is a way to tell FCKeditor to appear just like we expect.
Take a look at the source of marinelli template (you may use Firefox with Firebug to do that). The ID of main element is called "primary". The class is named "singlepage".
All we need to do is to tell FCKeditor to use that styles:
- Edit FCKeditor profile, in the "CSS section" choose use theme css
-
In modules/fckeditor/fckeditor.config.js, add the following:
FCKConfig.BodyId = "primary";
FCKConfig.BodyClass = "singlepage"; - Now our body inside of the FCKeditor gets the right ID.
-
Well we still have the wrong background and text alignment. To fix this, add another line in fckeditor.config.js:
FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;}";
in newer versions of marinelli theme we may also need to adjust the font size, so if you need to, use the following code instead:
FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;font-size:0.8em}";
- Remember to clear your browser's cache after applying changes to javascript files.