Create a custom Editor Stylesheet

JCE uses your site's Template style sheet to get the list of styles displayed in the 'Styles' drop down list and to style the contents of the editor so that it appears similar to the final output on the front-end of your site.

You may need to create a new style sheet for JCE to use because:

1. The text and background colours conflict, making editing difficult (dark text on a dark background)
2. Your template uses more than one style sheet, eg: the standard template.css and an additional style sheets containing different colors etc.
3. The style sheet contains more styles than you want available in the Styles list.

Create an editor.css file

Create a new editor.css file (if it doesn't already exist) in your templates css folder, ie: templates/your_template/css/editor.css

Get the stylesheets used by your template

Go to the front page of your site and view the source code. Make a note of the css files loaded by your template. For example the default Joomla! template rhuk_milkyway will load the following :

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />

If your template uses a caching mechanism such as in Yootheme's Warp framework, you will need to turn off caching or compression to get the list of stylesheets.

Create @import rules for each stylesheet

In your new editor.css file, add an @import rule for the template stylesheets you want to include. Remove the path up to the css folder from each of the urls eg: 

• /templates/rhuk_milkyway/css/system.css becomes system.css
• /templates/rhuk_milkyway/css/variations/green.css becomes variations/green.css:

@import url(system.css);
@import url(general.css);
@import url(template.css);
@import url(blue.css);
@import url(blue_bg.css);

Override dark background colours or centered text

If your template uses a dark background or a background image that has made reading the text in the editor difficult, or if the editor text is centered, add the following underneath the last @import entry :

body {
margin:0;
padding:0;
text-align: left;
background-color: white;
background-image: none;
}

Only add css rules to the editor.css that are already in your template's stylesheets. If you add a new rule to the editor.css that is not in the template, you will also need to add this rule to the template's stylesheet.

Configure JCE to use the new stylesheet

For JCE 2.0

In the Administrator section of your site, go to Components ->JCE Administration -> Global Configuration. Change Editor Styles to Custom CSS Files. In the Custom CSS Files field, type in templates/$template/css/editor.css

For JCE 1.5

In the Administrator section of your site, go to Components ->JCE Administration -> JCE Configuration. Change Use Template CSS to No.

Save.

Clear your browser cache and open an article for editing. The editor contents should now more accurately reflect the styling of front page articles and the Styles list should be updated with the new style classes.