Livethemer

Build your own unique, professional Drupal theme without writing any code.

Livethemer provides a point-and-click interface allowing you to modify and enhance your site’s theme — or even build a whole new one from scratch — all without writing any code. Page layouts, backgrounds, colours, typography, block styles… all these aspects and loads more can be styled by Livethemer.

The module comes with a number of “variations” which provide new visual appearance (and possibly functionality) to specific elements on the page (blocks, buttons, teasers, etc). New variations can also be downloaded from http://livethemer.com

View the demonstration screencast at http://livethemer.com/about. As a small demonstration of what's possible, the theme on the Marmaladesoul.com site has been created with a beta version of Livethemer.

Livethemer works best with the Livethemer Base theme: http://drupal.org/project/livethemer_base

Compared to Skinr (http://drupal.org/project/skinr):

* Livethemer provides a dynamic point-and-click interface to apply styling

* Skinr styles are limited to CSS; Livethemer variations may include additional CSS and/or Javascript, but may also provide an entirely fresh theme function or template file (tpl.php) and the object in question is dynamically regenerated using the new function/template.

* Livethemer allows variations to be applied to specific objects on the page based on a deep knowledge of each Drupal object. For example, you can assign a certain variation to all blocks generated by the user module, or a variation to the first node teaser in a teaser list, or to all comments authored by a certain user.

* Livethemer variations are not inherently theme-specific. In other words, many Livethemer variations are likely to work in most Drupal themes.

Compared to Sweaver (http://drupal.org/project/sweaver):

Like Sweaver, Livethemer provides a dynamic interface for adjusting CSS properties. However Livethemer is fundamentally different in that it enables much more than CSS changes.

It allows site builders to switch between variations for objects on the page (variations are based around theme templates ie *.tpl.php files or theme functions). Livethemer also makes it possible for variations to dynamically add javascript and CSS files to the theme and see the results in real time.

Technical overview

Live Themer watches for the use of certain theme hooks when rendering a page (eg block, page, comment etc). When Drupal's theme engine renders one of these, Live Themer stores the render array (or, if not available, the variables array sent to the theme_hook() function in question), so it can later regenerate the same theme hook but with a different *.tpl.php file or theme function.

The Javascript UI allows a user to dynamically select from the variations available for each of these theme hooks, thereby allowing to assign specific *.tpl.php templates or alternative theme functions to specific objects on the page.

Further, variations may also (or only) contain css or javascript. If there is only a css or js change, the markup for the object is not regenerated; the css or js is dynamically added to the dom and a unique class is added to the object on the page.

The result of the configurations made through the Javascript interface is:

* a serialised array containing template suggestion information and variables which are fed as necessary into templates via a preprocess function. The theme layer is given this array thereby not requiring the Livethemer Inspector module to be active whilst simply using the theme.

* a CSS file which is dynamically generated by the module. This CSS file can be aggregated using Drupal's usual method.

Downloads