WYSIWYG - Custom Styles

How to Enable Custom Styles for your Site's Editor

When editing a site you often want the editor to represent the final content as close as possible. TinyMCE editor allows you to specify a stylesheet for use which will customize the look and feel of the editor.

Steps to get your site's style working with TinyMCE:

1. Create a new style.css file inside of your themes folder at:
   
   path_to_your_site/sites/default/themes/path_to_your_theme/css/style.css
   
2. Inside of the style.css file add @import css directives to import other stylesheets in the theme:
   
   @import "screen.css";
3. If your site has a custom background color that is different than a node's background color you will have to override the "body" css selector with the background color of the node:
   
   body {
   background-color:#fff;
   }
   
   Note: You may have to use !important to get the style to override the other styles.