Support Tutorials Configuration Custom Styles
Custom Styles PDF Print E-mail
Tutorials - Configuration
Wednesday, 25 April 2007 14:01

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 frontend 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 that one style sheet, eg: the standard template.css and an additional style sheet containing different colors etc.
  3. The style sheet contains more style than you want available in the Stlyes list.

1) Create a copy of your Template's css file. This file is located in the templates/your_template_name/css/ folder and is called template.css in Joomla! 1.5.x (if the template is a native 1.5 template) and template_css.css in Joomla! 1.0.x. Rename it to something like editor_content.css

Some templates already contain a file called editor_content.css. You can either delete this file or use it instead of making a new one.

2) Edit the new file, removing styles that you don't need or adding additional styles from other style sheets or changing values that affect the editor background, such as the 'body' styles, eg:

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

3) In the Administrator section of your site, go to Components ->JCE Administration -> JCE Configuration. Change the 'Template CSS Classes' value to 'No'.

In Joomla! 1.0.x, set the Custom CSS Classes value to the name of the new style sheet.

custom_css

In Joomla! 1.5.x, set the Custom CSS Classes value to the path to the new style sheet. You can use the keyword $template instead of typing in your template name, eg: templates/$template/css/editor_content.css

template_css02

4) Save.

The editor's Styles dropdown should now reflect the new changes (you may have to clear your browser cache first) and / or the editor should now use the new style sheet to style the editor content.

Last Updated on Tuesday, 09 September 2008 13:11