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:
- The text and background colours conflict, making editing difficult (dark text on a dark background)
- Your template uses more than one style sheet, eg: the standard template.css and an additional style sheets containing different colors etc.
- 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 each of the templates css files. 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:
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 :
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.