UI Customization

Almost all of the UI generated by Mavo is customizable. Find out how in this section.

Styling with CSS

The easiest way to customize the UI is via CSS. You can find many style hooks in the index.

Some examples for common cases follow:

Style differently in edit mode

Give an element with property="foo" a yellow background when it is in edit mode:

		[property="foo"][mv-mode="edit"] {
			background: yellow;

Mavo toolbar

The Mavo toolbar is the dark toolbar that you get by default on every Mavo app, with controls like Edit, Save, Clear etc. By default it is added inside the Mavo root, at the beginning.

To change its placement and/or use your own HTML element for it, just use class="mv-bar mv-ui" on your desired element. You can omit the class mv-ui if you don’t want any of the associated styles. This is useful when you want a completely different styling and would rather start from a blank state. You can see an example of custom toolbar styling on the SVG Paths demo.

You can also use the mv-bar attribute on your Mavo root to customize which controls can appear and in what order. The default value is "status edit save clear login logout" which includes all controls available by default. Plugins can extend the list of available controls. For example, to hide the toolbar unless you’re logged in (which you can do by adding ?login to the URL), you can just drop login from the value:

You can hide the toolbar completely by using mv-bar="none". You can then use classes like mv-status, mv-edit, mv-save, mv-clear, mv-login, mv-logout on your own buttons to provide the corresponding functionality. However, note that if you choose to go this route, these buttons will be always shown, regardless of whether the user has permission for the corresponding action.

Item controls

These are the buttons that Mavo adds to each collection item for deleting it, moving it, or adding items before/after it. By default they are added as the last child of the collection item.

To change the placement of their container and/or use your own HTML element for it, just use class="mv-item-bar mv-ui" on your desired element. Note that if you have nested collections, this will be associated with the collection that is the closest ancestor of the element.

Similarly to the Mavo toolbar, if you don’t want any of the default styling associated with these controls just omit the mv-ui class.

Add new item button

For every collection, a button to add new items is generated and placed before the collection if it has mv-order="desc" or after it otherwise. The default label of the button is of the form "Add [name]", where [name] is the name of your collection.

Often you may want a custom label or a custom placement for this button. You can do this by using a class of mv-add-[name] on your desired element, where [name] is the name of the collection you wish to associate it with. Alternatively, if the association is obvious, you can just use a class of mv-add instead.

Both of these classes are also present on the generated buttons and you can use them for styling.