Developers

Custom CSS can be used in conjunction with the WYSIWYG (TinyMCE) content editor within Ekklesia 360. 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 by using FTP.

Populating the Style dropdowns

Any classes defined in "editor.css" will be available in TinyMCE's "Formats" dropdown. If you highlight an element on the page and then choose one of your custom Formats in the dropdown, TinyMCE will add class="classname" to the block level element. If you highlight a small portion of text, it will wrap the text in <span class="classname">.

Note that the same classes added into "editor.css" should also be defined in your site's own stylesheets in order for those styles to take effect on the site's templates. 

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 }