The Joomla! Forum ™

How to fix the dark background in TinyMCE editor when your site has a dark background.

Additional: Also, how to set up custom CSS classes just for the editor.

I'm using Joomla 1.07 and tested with IE 6 and Firefox 1.07 and I use the TinyMCE editor in advanced mode.

Dark Background fix

By default, TinyMCE editor uses your template's CSS file to determine the background of the textarea of the editor. This is fine if
your site has the same background as it's content area. But for those of us who have a site with a dark background and a light
content area, it can be impossible to see what you're doing. Not only does the editor use the current template's template_css.css
file, it has it's own CSS file and we will make use of it in this fix.

1. Browse your Joomla installation and find the following file
/mambots/editors/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css.

2. Now copy this file to the CSS folder of your site's current theme.

3. Log into your administration backend and go to Mambots/Site Mambots.
In the Mambot Manager find TinyMCE WYSIWYG Editor and click.

4. In the right Parameters column find Template CSS classes and make sure Yes is clicked. Below that, find Custom CSS Classes.
    In the field next to it type in the path to your template's CSS folder along with the name of the CSS you just copied there.

Example:
[color=blue]/templates/TEMPLATENAME/css/editor_content.css[/color]

Now test it. Refresh your browser, log in and hopefully the editor will have a white background...great!

New problem, where are my styles? Well, since we no longer use the theme's CSS file for the editor, we don't have the styles for
our site to apply while we compose/edit. Read on to the next section while we fix this AND we improve upon it's usage.

Custom CSS classes in the editor

Now your editor is lacking all those style classes your template uses. One easy fix would be to just open the templates CSS file and
copy/paste all those classes into editor_content.css wouldn't it?

Wait a second. Do you really need ALL those classes to show up in the editor's dropdown menu? Many of those classes apply
to sections of your template not accessible by the WYSIWYG editor. How about we just use a few select classes we know we
need for our editable content.

I like this idea because registered members submit edited content to the site and I don't want
Joe Schmoe submitting content after he has highlighted some text and applied the wrong style
to it(remember that purple color used only in the pathway text!).

So basically we copy over only those classes we need/allow for editing content. I even went one step further and renamed the classes so anyone could read them in the editor's menu and know what they are used for.

Important: any styles you add to editor_content.css must also be added to your template's template_css.css file for them to work while viewing the content of your site.

Here is an example of what I put in my CSS file.
Note: leave the existing content in editor_content.css, just add to it.

Style used for a table

table.table_light_grey
{
background: #f7f7f7;
padding: 1px;
}

Style used to for italicized text(good for footnotes)

.text_small_9_grey_italic
{
  font-style: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 9px;
font-style: italic;
}

This worked great for me. you can even add different font face styles.

The only problem I forsee is if you run a site with a theme chooser.
In this case, you would need to make sure you did the above steps for each theme.

The quick fix for me was as follows:

On administration panel, from Mambots menu, select Site Mambots.

Put a check next to TinyMCE WYSIWYG Editor, click Edit button at top of page

On left side of next page under "Parameters," where it says Template CSS Classes, select No.

Click Save button at top of page.

VOILA! Done. No complex this and that. I'd imagine most people don't care to customize their backend editor.

_________________
http://www.monshishi.com - Gothic Clothing

take a look here:

http://forum.joomla.org/index.php/topic ... 96173.html

I too had the same issue - but didn't go through all that mess to fix it.  I just added:

background-color:  #000000

to the "custom CSS class" input box in the setup for TinyMCE (mambot).

I tried accessing the mambot and it says restricted access

There is a known bug with mambot access and 1.12 (and an easy fix).  Do a quick forum search and you'll find it (don't have the link handy).

Thanks sirmistermatt,
Your method worked for me too! I turned off Template CSS Classes in both of my text editors. Don't know what all that other stuff was that others are recommending in this thread.
Best,
railer

Greetings,
I too, attempted this fix (Joomla 1.5) but despite attempts to get the pathname in there and turning the CSS Template setting to "NO", I do not see any styles in the list. Per the instructions, the path name should be:

/templates/TEMPLATENAME/css/editor_content.css

right?

Also per the instructions there should be a file called "template_css.css" which must contain the same style which was placed in "editor_content.css"....

right?

I still see no update to the pulldown menu in TinyMCE. Any thoughts on why this would be?

Using Joomla! 1.5 with TinyMCE 2.0
I just renamed the editor.css (xditor.css) file so TinyMCE editor can't find it or use it.
It reverted to black type on white background.
Sometimes the simple solution is the best.

None of the previous answers where working in my case, for I have (and must have) in my template

(It worked only if I removed !important but the page would show some defects then).

So, the only very simple thing I did is to add the following in my template.css


and it works

I upgraded to Mambo 4.5.2. I like it very much despite small problems with 3rd party components that couldn't be corrected with patches or uninstalling them. Why was dark blue choosen as the background color in TinyMCE editor instead of white like in 4.5.1a. I think it is harder to see text when editing.