Go to page content

Modifying the admin

Marc Worrell— 3 April 2012

We are rebuilding the admin interface with Twitter Bootstrap.

Currently we are working on a new version of the admin interface.

This version will be completely based on Twitter Bootstrap. Bootstrap is a user interface framework which is surprisingly complete and easy to use.

The whole interface will be cleaner and have a clearer navigation. This is also the basis for some fundamental changes we are planning: cooperative editing. Though that will take some time before it is working...

As part of the Bootstrap rebuild we:

  • Moved the menu to the top of the page
  • Reorganized the menu structure
  • Added flexible blocks


The menu is moved to the top of the screen and re-organized in sub-menus.

We have:

  • Dashboard
  • Content: pages, media, mailing list, menu, comments
  • Structure: predicates, categories, translation
  • Modules: depends on the enabled modules
  • Auth: OAuth, users
  • System: log, configuration, status, modules

We think this new menu system will make the Zotonic admin much easier to use.


In the new interface it is possible to add your own blocks to your page. In this way you can have multiple html-blocks or other blocks on a single page.

Currently we have the choice between a header and a text block. The header block is meant to be shown as a header. The text block is for complete html blocks of text, just like a body.

Every block has an optional name. You can address a block by this name in the template:


Or you can just loop through all blocks:

{% for blk in m.rsc[id].blocks %}
  {% include "_block.tpl" %}
{% endfor %}

Next is to add an extension mechanism so that we can have some more interesting blocks.