Yep, that's something you can experience with any of your new templates, especially the ones with colored/dark background. Why this happening? And more important, how you can fix it?
The answer to the first question is simple: the 'WYSIWYG' editors used in Joomla are just doing what the name implies: are taking the template's CSS file and rendering the newly entered content to be as close to what will be shown on the site as possible. And if your template's background is colored or an image file is used to fill your background, then that will be used there too. The fix is relatively easy in the case of most current editors. Almost all of them have the possibility to use a special CSS file in the editing pages. Here we will show you the recipe that works for the family of editors based on TinyMCE editor, delivered by default with Joomla (as JCE), but the solution is similar or can be easily adapted for all such advanced editors.
So back to basics. All these editors, as we already said above are showing the text against the color or image specified in the template_css.css file of whatever template the front-end of the website is using. This often presents a problem for users when their website is designed to appear as a lighter content pane floating over a darker-colored background. The darker background is what appears in the editor windows, making the text almost impossible to see. In such cases, the solution is to tell the editor not to use the template_css.css file as a reference, but rather to use a different CSS file instead. Some editors (such as JCE and FCK) have configuration interfaces that allow you to override the template_css file directly with your own settings or to tell the editor to ignore the template classes. You may wish to explore this option before trying the solution below, at least as quick fixes until you implement the solution described below.
Step 1: Create a customized CSS file.
The first thing you'll need to do is to write a customized .css file for your editor. It doesn't have to be very complicated, generally only one CSS statement may be enough, but you can insert here as many as you wish. The example below is a bare-bone solution, which will work in most cases.
So here's the new minimal CSS file:
/* CSS Document */
/* Body Tag for Background Color and Font Specs. */
body {
font-family: Arial, Helvetica, Sans Serif;
font-size: 12px;
color: #333333;
background: #ffffff;
}
The key part that fixes the background issue is the 'body' style specified in the middle. You can change parts of this to match your template if you like, but leave the 'background' rule set to #FFFFFF. This will make the editor windows white, as opposed to the dark background color of your site template. If your website uses a background IMAGE in addition to a color, the same thing applies.
You can re-define here all of the styles from your original template_css.css file, if you think that can be useful, but in most cases that may be an overkill. But if you want to do that, a simple solution may be to take the original file, edit it as you need and save it in the same directory under a new name, as for example as editor_content.css.
Step 2: Upload your CSS file to the correct directory.
The new CSS file must be in the same directory as your main template CSS file is. So if your Joomla! installation is in the "joomla" folder, you will need to upload the new file here:
The key is to make sure you're in the correct front-end template folder for your website. Upload your editor_content.css file to the CSS folder under this template directory.
Note that in most cases, the only other file in this directory is a file called 'template_css.css'. If you see that file, you're probably in the right place. Also, note that there is a 'css' directory in joomla/templates/ as well, but this IS NOT the directory you're looking for. You want the 'css' directory in the template's directory you are using.
Step 3: Point your Editor to the new CSS.
Now go back to your site and into the administration area. Here are the differences in the recipe for the different Joomla generations are occurring: In the Joomla 1.0 click on 'Mambots" and "Site Mambots" to see the list of Mambots currently in use in your website. Check TinyMCE WYSIWYG (or whatever WYSIWYG editor you're using) and then 'Edit' to open the editing pane for the editor. (alternatively your editor may have it's own administrative component, as JCE has, in this case you should use that component.)
Look to the right side under 'Parameters' and scroll down until you see the option entitled 'Template CSS Classes'. Click the radio button to 'no'. Right under this is a field entitled 'Custom CSS Classes'. In this field type:
Then save and exit. Note, than some editors are requiring to enter only the new file's name, as
THe JCE in all his Joomla variants, and most of editors running under Joomla 1.5 and 1.7 have their own administrator interfaces. You need to find the similar settings in that interface (usually is very easy to locate) and enter there the name of your customized CSS file. JCE is usually is factory-preset to look for editor_content.css in the active template, if exist.
Experiment a bit, to see what exact settings is applying for your editor. This should correct the background issue in your editor. If it doesn't, you've either set up your editor_content.css file incorrectly or you've uploaded the file to the wrong directory.
