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.
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.
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
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.
The other fields Selector, Classes 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".
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.
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.
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.
Once the Editor Profile has been saved, the Custom Styles will be available in the Styles list in the editor toolbar.