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:
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:
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 :
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.
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.