Providing User Friendly Style Names

June 30, 2009

EditLive! will automatically detect custom styles from your stylesheet and display them in the styles drop down. In some cases it may be desirable to provide a more user friendly name than the actual stylesheet uses. This is achieved by adding the style to the configuration file.

Under the styles combo box element, simply add an extra <comboBoxItem> element for your style.  The “name” attribute should match the CSS selector exactly (eg: a.moreLinks or .myStyle). The value of the text attribute will be displayed to authors in the styles drop down.  For example:

<toolbarComboBox name="Style">
 <comboBoxItem name="P"/>
 <comboBoxItem name="H1"/>
 <comboBoxItem name="H2"/>
 <comboBoxItem name="H3"/>
 <comboBoxItem name="H4"/>
 <comboBoxItem name="H5"/>
 <comboBoxItem name="H6"/>
 <comboBoxItem name="PRE" />
 <comboBoxItem name="a.moreLinks" text="More Links" />
</toolbarComboBox>

Note that styles in the configuration file will appear in the styles drop down even if they are not present in the stylesheet.

Back to Hints & Tips