5

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?

Phil Jackson
  • 10,238
  • 23
  • 96
  • 130

2 Answers2

11

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.

Sam Minnée
  • 724
  • 5
  • 14
  • 2
    If you add a class to typography.css but it doesn't show up in the dropdown, try clearing the browser cache. – Joril Dec 28 '10 at 15:57
  • As @markus mentioned, TinyMCE looks for a file called editor.css in the css directory, and not typography.css – Gavin Bruce May 13 '13 at 08:53
  • 1
    I believe you can actually put your 'editor' css file anywhere and call it anything you like. You can configure TinyMCE to load any css file in _config.php with the following code: `HtmlEditorConfig::get('cms')->setOption('content_css','/themes/my-amazing-theme/styles/kick-ass-editor-styles.css');` – Matt Apr 01 '14 at 16:22
  • 1
    It's also worth noting that if you use the 'theme_advanced_styles' method above it will override any classes that would otherwise have been in the dropdown, so you'll only have "Name 1" and "Name 2" - in my case this was perfectly acceptable, but it's something to bear in mind. – Matt Apr 01 '14 at 16:27
  • @Matt I think you should post that as an answer :) – gherkins May 23 '14 at 09:41
6

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.
markus
  • 40,136
  • 23
  • 97
  • 142
  • 1
    This is the official documentation on the editor.css file http://doc.silverstripe.org/framework/en/reference/typography – Cam Apr 02 '14 at 21:46