Add CSS Styles Joomla TinyMCE Text Editor
 |
The main purpose of creating a Joomla CMS website for Miracles of Health is to give them the tools they need to add new content without having to call the web designer, me. Joomla comes with a WYSIWYG editor that is designed just for this. Sounds easy, but in practice it took some trial and error to get things to fit their needs and work smoothly for the customer.
The first thing we tried was pasting text from Microsoft Word, which led to all kinds of formatting issues. Then the customer tried starting from scratch inside the TinyMCE text box and formatting the text as they typed, this also led to a mess inside the ‘toggle editor’ html window. After cleaning up the first couple of weeks of trial and error I started to think that the only way the customer is going to have control over the appearance of the articles is to learn some basic html. For someone that designs websites that sounds easy but for someone that doesn’t it sounds like a monumental task, which defeats the purpose of having a WYSIWYG editor.
Ok, I guess we have to come up with a better solution.. then it hit me, we should be able to add styles to the TinyMCE drop down menu. This will lead to unlimited CSS possibilities, but the initial goal is for the blog / article posts to use the same color styles as the rest of the website without making a mess of things by pasting word text, using the color picker, or using h1 h2 etc text formats inside the TinyMCE editor. I want confident end users not ones that feel defeated because they have to call me frequently to clean up their coding mess.
By adding CSS styles to the Tinymce Style drop down menu the end user of the site can specify exact web text colors and styling. This will be crucial for the site owner to maintain branding consistency in their articles over time. Seems simple enough..
After my initial google search I found a number of blog / forum postings on the subject but no solutions to my complete issue. These are the steps I found:
- Create a new CSS file that includes your new styles for the TinyMCE editor to link to
- Put the new CSS file inside your /templates/custom/css/ folder
- The new file must be named editor.css (not sure this is critical, maybe on some servers)
- TinyMCE drop down menu only displays classes not id’s
- By adding a style to a text selection TinyMCE wraps it with a ‘span class’
 |
By following these instructions I was able to get the new CSS styles to work inside the text editor window but once the changes were saved the styles did not translate to the live website.. But if I clicked to edit the text again the styles still show up in the editor.. hmmm…
After some frustration, the solution turned out to be rather simple, not only do you have to add the css styles to your newly added TinyMCE ‘Custom CSS Classes’ but you also have to add these same styles to one of the other ‘live’ CSS style sheets your website page links to.
These are the colors that Miracles of Health uses, so in order to make them accessible to the TinyMCE editor we added them to both the TinyMCE Text Editor stylesheet and to a live stylesheet:
.recipe-author { color:#135cae; font-style:italic; }
.blue { color: #135cae; }
.orange { color: #f36c30; }
.fuscia { color: #b7238f; }
.green { color: #76c048; }
.red { color: #ed1c24; }
.lightblue { color: #e1eef6; }
.dimgray { color: #333333; }
In synopsis, the CSS file path entered in the TinyMCE ‘Custom CSS Classes’ input box only affects the Text Editor display. In order to transfer these changes to the live website the same css styles need to be added to one of your ‘live’ css stylesheets as well.
Check out their website World’s Best Colon Cleanse, they have been doing a wonderful job of adding recipes and blog posts, so proud of them!.
October 4th, 2011 at 2:14 am
Thanks for the tip.
In Joomla 1.7 I didn’t need to specify a path in the plugin, it found editor.css automatically in my template/css directory.
As for the last point, why not just link to the editor.css in your index.php instead of having double code?
That way there’s no chance of the stylesheets being out of sync. Works for me!
December 13th, 2011 at 5:25 pm
Hey Dave,
Thank you for the information. It is good to see that Joomla 1.7 has improved in regards to this. The only downfall to linking to editor.css in the index.php is that when you upgrade Joomla you will lose the link. But I definitely see your point of not having to keep two separate css files in synch.
Warren
January 18th, 2012 at 5:35 pm
This was very helpful. Thanks! I’m using Joomla 1.7 and have been experiencing the same issue.