FAQ: Why are the backgrounds of my WYSIWYG editor fields colored?

This is the archive off all FAQ related threads.
Locked
wixenstyx
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Sat Aug 12, 2006 6:35 pm

FAQ: Why are the backgrounds of my WYSIWYG editor fields colored?

Post by wixenstyx » Mon Aug 14, 2006 7:08 pm

The simple answer as to why this happens is in the term 'WYSIWYG'.  Content editors like TinyMCE attempt to allow users to see what the text they're entering will look like when it appears on the front-end of the website. To this end, they show 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, it may be necessary to tell the editor not to use the template_css.css file as a reference, but rather to use a different css file instead.

Note [added by mod]: Some editors (such as JCE and FCK) have configuration interfaces that allow you to override the template_css file or to ignore template classes. You may wish to explore this option before trying the solution 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, and you can use the file below for reference (Many thanks to jxl, who wrote the sample file).

Code: Select all

/* CSS Document */

/* Editor Assigned Styles */
/*make sure that any styles you put here also exist 
in your template_css.css file or they will have no 
effect in the front end */

p.rightalign {
  text-align: right;
}

.red { 
  color: #c00;
}

.green {
  color: #0c0;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
p.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

.small {
	color: #999999;
	font-size: 10px;
}

/* Body Tag for Background Color and Font Specs.  */

body {
	font-family: Arial, Helvetica, Sans Serif;
	font-size: 12px;
	color: #333333;
	background: #ffffff;
}

/* Optional Basic Stuff you can use to make everything look like it does on the site itself */
/* you can get this stuff right out of your template_css.css file, or you can just leave it out */

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 16px;
padding-left: 16px;
padding-top: 0px;
background-image: url(../images/arrow.png); /* use the real image path that you have on your site. An absolute path is OK */
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: left;
	font-size: 12px;
}

a, a:link, a:visited {
	color: #c64934; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #900;	text-decoration: none;
	font-weight: bold;
}


Make careful note of the comments in the file above.  The first section is comprised of text classes; you'll want to go into your template's template_css.css file and find the text classes (.highlight, .small, etc.)  it specifies that you'll be likely to use in your content and make sure to copy them into the editor_content.css file as well.  The same is true of the styles defined in the last section (a:hover, td, ul, etc.). 


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.

Incidentally, if your website uses a background IMAGE in addition to a color, the same thing applies. 

Also, if this is too much work, you CAN just copy and paste your template's template_css.css file into a new CSS file and change the BODY style so that the background is set to #FFFFFF.  This is less neat and orderly, but you'll be sure you have all of the classes and such defined properly this way.

When you've finished, save your new CSS file as editor_content.css

Step 2:  Upload your CSS file to the correct directory.

You'll use an FTP client for this, which hopefully you're already doing.  If Joomla! is in a separate folder, you'll navigate to:

joomla/templates/[the template you're using]/css/

If you don't have Joomla! in a separate folder, just go to whatever directory houses your Joomla! files.  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 under the template you're using.

Step 3: Point your Editor to the new CSS.
 
Now go back to your site and into the administration area.  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. 

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:

templates/[template you're using]/css/editor_content.css

Then save and exit.

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.
Last edited by technopuzzle on Tue Mar 13, 2007 6:53 pm, edited 1 time in total.

User avatar
pe7er
Joomla! Master
Joomla! Master
Posts: 24934
Joined: Thu Aug 18, 2005 8:55 pm
Location: Nijmegen, Netherlands
Contact:

Re: FAQ: Why are the backgrounds of my WYSIWYG editor fields colored?

Post by pe7er » Sun Jan 13, 2008 2:56 pm

Alternatively: put the following in your template_css.css:
.mceContentBody {
text-align: left;
background: #FFF none;
font: normal 11px Arial, Helvetica, sans-serif;
}
Kind Regards,
Peter Martin, Global Moderator
Company website: https://db8.nl/en/ - Joomla specialist, Nijmegen, Netherlands
The best website: https://the-best-website.com


Locked

Return to “FAQ Archive”