silverstripe - adding styles to 'styles' drop down menu on editor

Question

from the question above, I thought it would be relatively easy but i can not find any documentation on on how to add styles to the 'styles' drop down menu. can anyone push me in the right direction?

Answer 1

The styles dropdown is automatically populated based on classes found in your theme's typography.css file. To add classes, just ensure that they are defined there. Alternatively, if you want to give the classes friendlier names or to remove some classes from the list, you can explicitly define the styles that you want listed by putting this in your _config.php file.

HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 
    'Name 1=class1;Name 2=class2');

It's a feature provided by TinyMCE, the WYSIWYG editor component, and this line is just setting the theme_advanced_styles setting of TinyMCE when used by the CMS. This thread on the TinyMCE site also discusses it.

Also note Markus' answer below: editor.css needs to be in the theme css folder and include the typography.css.

Answer 2

The answer of @Sam Minnée only works, if the editor.css is also in the theme css folder and includes the typography.css.

Here is a more detailed description of how these two play together.

If you have troubles getting the new styles appear in the editor, try the following:

• yoursite.com/admin/?flush=1
• Check the file permissions on your mythemes/css/editor.css file. It should be readable by the webserver user.