The Styles list in the editor toolbar is automatically filled with class names from your tempate or editor stylesheet.

Using the Custom Styles widget in Editor Profiles, you can add to or replace these styles with other classes, or with more complex styles that apply a tag, class or css style.

Creating a Custom Style

The Custom Styles widget is available when creating or editing Profiles. It is located in the Plugin Parameters tab, in the Style Select tab, and is only available when the Styles List Options Custom Styles option is checked.

Styles List options

Selecting Add will add the custom styles you create to the Styles list. Selecting Overwrite will replace all the options in the Styles list with the new custom styles. When either of these options is selected, the Custom Styles widget is displayed. Selecting Inherit will not add any new styles and will hide the widget.

Custom styles

Each Custom Style requires a Title and a Tag. 

Title

The Title acts as a description for the style and as a label for the style in the Styles list. It should be short and descriptive, eg: Red Heading

custom styles title

Tag

The Tag is the element that will be applied to the editor selection when the style is selected, eg: span or H1.

Select None(Apply to Selected Tag) to apply the style to the editor selection without creating a new tag.

custom styles tag

The other fields SelectorClasses and Styles are optional.

Selector

The Selector field allos you to specifiy a CSS selector that will determine where the style is applied. For example, setting this to img will apply the style to images only. Likewise setting this to a.popup would apply the style to anchors with a class of "popup" only.

In most simple styles, setting a Selector value will not be necessary.

Classes

The Classes field accepts a list of css class names (seperated by a space) that will be applied. This is similar to how the basic Styles list works, where the class names are extracted from your template stylesheet. Any class names you include in the custom style must exist in your tempate stylesheets.

Styles

The Styles field accepts a css style to apply in the standard css format, ie: a css property followed by a value, each seperated by a semi-colon. For example color:red; will apply a css color style with a value of "red".

custom styles style

Adding a new style

You can create as many Custom Styles as you want by clicking the Add new style... box which will create a new widget. 

custom styles new

Deleting a style

A widget can be deleted by clicking the x above the Title field and each widget can be collapsed by clicking the Up or Down arrow in the Title field.

custom styles close

Re-ordering styles

Re-order styles by dragging and dropping the style into the new position. It may be easier to collapse the styles before re-ordering.

custom styles reorder

Once the Editor Profile has been saved, the Custom Styles will be available in the Styles list in the editor toolbar.