ExpressionEngine®
Style Guide

Interaction Guidelines

Toolbars are used to give users a set of tools to interact with their content. They are most commonly found in content listings using a standard set of tools to interact with each individual content entry.

Toolbars can also be used to add editing tools to an RTE or standard textarea in the publish form. In both cases, specific tool classes are used.

Toolbars must contain at least one tool. Each tool must have a descriptive title tag.

Standard Toolbar

To create a toolbar use ul.toolbar.

Each li of a toolbar is a single tool. To create a tool, use one of the tool classes.

Toolbars are most commonly are used in the manage column of table listings.

HTML

<ul class="toolbar">
	<li class="view"><a href=""></a></li>
</ul>

Visual Output

back to the top


Standard Tools Requires: Standard Toolbar

This is a list of reserved tool classes for the standard toolbar.

  • .edit
  • .view
  • .sync
  • .settings
  • .find
  • .download
  • .manual
  • .remove use sparingly. when used, it must be the last tool.

Textarea Format Options

  • .writemode
  • .upload
  • .glossary
  • .emoji

Publish Layout

  • .move
  • .hide
  • .unhide

Admins & mods

  • .mods
  • .admin

Miscellaneous

Reserved for specific use, use sparingly.

  • .layout
  • .install
  • .approve
  • .add
  • .crop
  • .copy
  • .back
  • .next
  • .txt-only
  • .store

HTML

<ul class="toolbar">
	<li class="edit"><a href=""></a></li>
	<li class="view"><a href=""></a></li>
	<li class="sync"><a href=""></a></li>
	<li class="settings"><a href=""></a></li>
	<li class="find"><a href=""></a></li>
	<li class="download"><a href=""></a></li>
	<li class="manual"><a href=""></a></li>
	<li class="remove"><a href=""></a></li>
</ul>
<ul class="toolbar">
	<li class="writemode"><a href=""></a></li>
	<li class="upload"><a href=""></a></li>
	<li class="glossary"><a href=""></a></li>
	<li class="emoji"><a href=""></a></li>
</ul>
<ul class="toolbar">
	<li class="move"><a href=""></a></li>
	<li class="hide"><a href=""></a></li>
	<li class="unhide"><a href=""></a></li>
</ul>
<ul class="toolbar">
	<li class="mods"><a href=""></a></li>
	<li class="admin"><a href=""></a></li>
</ul>
<ul class="toolbar">
	<li class="layout"><a href=""></a></li>
	<li class="install"><a href=""></a></li>
	<li class="approve"><a href=""></a></li>
	<li class="add"><a href=""></a></li>
	<li class="crop"><a href=""></a></li>
	<li class="copy"><a href=""></a></li>
	<li class="back"><a href=""></a></li>
	<li class="next"><a href=""></a></li>
	<li class="txt-only"><a href="">some text to click</a></li>
	<li class="store"><a href=""></a></li>
</ul>

Visual Output

back to the top


RTE Toolbar

To create an RTE toolbar use ul.toolbar.rte.

Each li of a toolbar is a single tool. To create a tool, use one of the RTE tool classes.

RTE Toolbars are most commonly are used paired with a RTE textarea.

HTML

<ul class="toolbar rte">
	<li class="rte-bold"><a href=""></a></li>
</ul>

Visual Output

back to the top


RTE Tools Requires: RTE Toolbar

This is a list of reserved tool classes for the RTE toolbar.

  • .rte-bold
  • .rte-italic
  • .rte-list
  • .rte-order-list
  • .rte-link
  • .rte-upload
  • .rte-quote
  • .rte-elements must be the second to last tool.
  • .rte-view must be the last tool.

HTML

<ul class="toolbar rte">
	<li class="rte-bold"><a href=""></a></li>
	<li class="rte-italic"><a href=""></a></li>
	<li class="rte-list"><a href=""></a></li>
	<li class="rte-order-list"><a href=""></a></li>
	<li class="rte-link"><a href=""></a></li>
	<li class="rte-upload"><a href=""></a></li>
	<li class="rte-quote"><a href=""></a></li>
	<li class="rte-elements">
		<select>
			<option>Paragraph</option>
			<option>Heading 1</option>
			<option>Heading 2</option>
			<option>Heading 3</option>
			<option>Heading 4</option>
			<option>Heading 5</option>
			<option>Heading 6</option>
		</select>
	</li>
	<li class="rte-view"><a href=""></a></li>
</ul>

Visual Output

back to the top


HTML Buttons

To create an HTML buttons toolbar use ul.toolbar.html-btns.

Each li of a toolbar is a single tool. To create a tool, use one of the HTML tool classes.

HTML Toolbars are most commonly are paired with a textarea.

HTML

<ul class="toolbar html-btns">
	<li class="html-bold"><a href=""></a></li>
</ul>

Visual Output

back to the top


HTML Tools Requires: HTML Buttons

This is a list of reserved tool classes for the HTML toolbar.

  • .html-bold
  • .html-italic
  • .html-list
  • .html-order-list
  • .html-link
  • .html-upload
  • .html-quote
  • .html-strike
  • .html-ins

HTML

<ul class="toolbar html-btns">
	<li class="html-bold"><a href="" title=".html-bold"></a></li>
	<li class="html-italic"><a href="" title=".html-italic"></a></li>
	<li class="html-list"><a href="" title=".html-list"></a></li>
	<li class="html-order-list"><a href="" title=".html-order-list"></a></li>
	<li class="html-link"><a href="" title=".html-link"></a></li>
	<li class="html-upload"><a href="" title=".html-upload"></a></li>
	<li class="html-quote"><a href="" title=".html-quote"></a></li>
	<li class="html-strike"><a href="" title=".html-strike"></a></li>
	<li class="html-ins"><a href="" title=".html-ins"></a></li>
</ul>

Visual Output