User Interface

Boomla automatically provides some user interface features for you out of the box. Here is how you can take advantage of them.

Warning: do not use undocumented features. See our reserved namespaces.


class="o1-file" data-o1-path="//example.com/path"

The class o1-file marks a HTML tag to contain a file. The attribute data-o1-path selects the file.

After marking a HTML tag to represent a file, Boomla will show an icon for you when, hovering your mouse over it and you will be able to drop files on it. With the icon, you will be able to sort files, cut/copy/paste them, show them in the IDE, etc.

Note that the entire document (page) is recognized as a file WITHOUT having this class and attribute specified. The path of this file matches that in the location bar.


class="o1-file-none"

Turn off all present and future graphical user interface features, like showing the icon, supporting file drop or highlighting the file on hover in structure view.

class="o1-file-no-icon"

Do not show icon for this file upon hovering the mouse.

class="o1-file-no-drop"

Do not allow dropping files relative to this one. The drop target highlighter is not shown either.

class="o1-file-no-structure"

Do not highlight file in structure view.

class="o1-placeholder" data-o1-placeholder="1"

Specifies a dropzone for the closest tag with class="o1-file".

Note that when no ancestor has this class, the entire document (page) will be recognized as the drop target, specified by the path in the location bar.


class="o1-contenteditable"

When the Edit tab of the Toolbar is open, this class is added the the <html> element of the page. You may want to apply custom styles when in editing mode.


data-o1-contenteditable="title"

Make the HTML tag text editable when the Boomla Toolbar’s Edit tab is open. The attribute value specifies where to save the contents of the tag when the user presses the Save button on the Toolbar.

Possible values are:

  • name
  • title
  • body
  • attr KEY TYPE - custom file attribute key KEY of type TYPE. For example, attr foo string

The values will be stored on the represented file - selected by the closest HTML ancestor tag with class="o1-file".

Note that by default, rich text formatting (HTML) is not enabled. To enable it, add the attribute data-o1-contenteditable-format="html".


data-o1-contenteditable-format="html"

Enable rich text formatting on an editable element. See attribute data-o1-contenteditable for more details.

class="o1-top-fixed"

If you want to position an element fixed to the top of the browser window, instead of defining top = 0 in your CSS, add this class to your HTML code. Boomla will update the value of top to match the Toolbar’s height.