Syles in the TinyMCE editor

The display of text in the default TinyMCE editor is controlled by the ..\templates\system\css\editor file. If you modify the Lavinya6 template.css file, or chose another template, you may want to change editor.css to match.

Unfortunately, TinyMCE is a bit quirky. If you add a style to editor.css (mystyle, say) and then code an element as

...

, TinyMCE will ignore the style. The page displayed by the front end will use the mystyle styling but you won't see it in the editor.

You can get TinyMCE to apply your style by selecting the text you want to apply the style to, then clicking the "styles" drop-down box and selecting the style you want. Sadly, TinyMCE does this by applying each element of your style separately. So, for example:

.css file

.mystyle{
    font:Helvetica;
    color:red;
    width:200px;
}

Page html created by TinyMCE

<span style="font:Helvetica;"><span style="color:red;"><span style="width:200px;">
   Your text here</span></span></span>

There are two problems with this. First it's messy and hard to read and second, if you change the css file, it won't affect any pages you've already written.

Suggested best practice

To work around this problem, I would suggest that you make any changes in the template.css file apply to an html element inside the table class contentpaneopen. So, to change the coding for all <p> elements on your page, you would make the following entry in template.css:

table.contentpaneopen p{
  font-family : georgia, Verdana, arial, serif;
  font-weight: normal;
}

This works because the content of the page is enclosed by a table of the class "contentpaneopen". (For more information about the classes used in the template see How to modify the template

If you must use styles that cannot be applied this way, then you should add the class declarations to the html by hand.

Return to Design How-To's