Custom styles in the Joomla editor

Alright so here goes our first tip. The content editor is an important part of any CMS. Most people don't know HTML so editors and some admins will be using the default TinyMCE editor in Joomla. One simple thing you can do to make your template more friendly for this users is to add the custom styles for the template directly to the styles drop down list.

As an admin, you can do this by editing the editor plugin settings to include the template's stylesheet but since we don't want the end users to have to do this we are going to use another method. The trick is to create a file inside the template's CSS folder called editor.css. Joomla will look for this file automatically. The styles that are listed in this stylesheet will then be shown in the drop down menu of the editor. So the file can look something like this:

.clearfix{}

.clear{}

.left{}

.right{}

.process-list{}

.step-number{}

.border{}

.pullquote{}

.make-me-btn{}

.zebratable{}

.hovertable{}

.caption{}

.highlight{}

hr#system-readmore{}

hr.system-pagebreak{}

Now this will get the styles listed and they will work then in the template. The only thing left to do is add some styling to them. keep in mind that the style rules applied in editor.css will be visible in the editor window but not in the template itself, so they are only to help the article writers. For example the default system-readmore id has the following styling:

hr#system-readmore{ border: red dashed 1px; color: red; }

The class names shown before are the ones used for the editor in the Helix template. Yours will be naturally different. And that's it. Now the writer can for example select some text and choose pullquote from the style menu to get it wrapped in a span with the proper class without touching the HTML. Pretty easy and practical, isn't it?