Custom Styles for TinyMCE

Last edited: 5/16/2011

Custom CSS can be used in conjunction with the TinyMCE content editor. There are two primary uses for this: populating the “Style” dropdowns in the TinyMCE interface, and applying your own visual styling to the WYSIWYG display.

This is done by adding a file called editor.css to your site’s media folder (as specified in the site settings). This file should not be uploaded using the media manager, but simply using FTP.

Populating the Style dropdowns

Any classes you define in editor.css will be available in TinyMCE’s various style dropdowns as styles that can be applied to highlighted text. If you highlight an entire block level element, TinyMCE will add class=”whatever” to the block level element. If you highlight a small portion of text, it will wrap the text in span elements and give the class to that.

Applying visual style to the WYSIWYG display

Any elements you specify styles for in editor.css will display using those styles in the TinyMCE display. If you are adapting editor.css from the site’s stylesheet, be sure to edit out any div selectors. For example, do not use:

#content h3 { color:red }

But rather use:

h3 { color:red }

Note that editor.css is not automatically linked in the frontend. Any styles you define in editor.css must also be defined your site templates (either by copying the styles to the main stylesheet or linking to editor.css).