Help By Example

Editing the Styles Menu

Creating custom WYSIWYG styles

How to create custom styles for the pages editor WYSIWYG toolbar style menu.

Custom styles can be configured for the styles menu on the pages editor WYSIWYG toolbar by defining an array of styles in your private config file.

Open the LiveWhale public client config (/livewhale/client/public.config.php) using an FTP client or via the command line.

The array to define looks like this:

$_LW->REGISTERED_APPS[‘pages_editor’][‘custom’][‘style_formats’]=array(

      array(

            ‘title’=>’My Style’,

            ‘selector’=>’p’,

            ‘classes’=>’my_style’

      )

);

 

In this example, a single style is defined, named “My Style” (as it appears in the menu).

The “selector” attribute defines the valid selector for the style (multiple selectors can be listed as comma separated). In this example, the custom style is valid for paragraph elements. The selector also impacts the context for the style’s availability. A selector for table elements will appear on in the table WYSIWYG interfaces. A selector for a links will appear in the insert-link interface, and so forth.

The “classes” attribute defines the class name to be applied to the element. (This also supports multiple classes, comma separated.)

Note: In some cases you may also want to use the “inline” or “block” attribute. These specify an inline or block tag to be applied to the selector.

If only title is defined, a non-selectable divider will be added to the dropdown list with the specified text.

For further information on custom styles in TinyMCE, please see the TinyMCE documentation.