Force TinyMCE's Background to always be white

Matt West Tue, 02/05/2008 - 23:13

When setting up a Tiny MCE profile you can specify what CSS settings to use. By default it uses your themes CSS settings. This is nice, because then as you add text it truly is WYSIWYG. The problem is if you have a colored or picture background in your theme. For example on this site I have a background image but all my content is displayed on a white background. However, TinyMCE will not display a white background when typing instead it will display a gradiant.

The trick is to add a new css file to your theme. Call this file tinystyle.css. In this css file add this line:

body {background:white; background-image: none;} 

Now goto your TinyMCE profile. Under the CSS section set the Editor CSS dropdown to "define css" then set the CSS path to: /%t/style.css, /%t/tinystyle.css. This will tell TinyMCE to use your themes default styles first and then to add the tinystyle.css styles next. Which will give you all the benefits of your them style, but set the background to white. Note, if your content is normally displayed with a different colored background you can edit the tinystyle.css to that color.

Post new comment
The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options