Adding CSS to JCE

Not everyone is a master CSS poet and this holds especially true when you are developing a Joomla site for a client with limited computer knowledge.

Thankfully if you are using Joomla 1.5 and JCE there is a simple way to add a custom set of style sheet rules that the user is able to select from the styles drop down menu.

The process is quite simple:

Components -> JCE Administration -> Configuration

scroll down to the formatting section

set “use template CSS” to NO from the drop down menu.

And finally you then put the path of your CSS template into the “use Custom CSS” field. For example: templates/your_template/css/template.css

And now you are able to select all of the template styles from template.css whilst you are in your JCE editor.

This may lead to a large amount of unwanted styles however. The best solution to this is to make a secondary CSS file that only houses the CSS styles that you (or your client) will want to use through the JCE editor. If this is the case simply create your new css file and then update the “use Custom CSS” field to point to your secondary CSS file. For example: templates/your_template/css/JCE_small_template.css