Theming

Grunt calls itself "The JavaScript Task Runner." Huh? What's a JavaScript task runner?

The JavaScript part comes from its dependency on using Node.js. The task runner is another way of saying automation. So what we have is an automation tool built on top of Node.js.

Drupal can be complicated, but with that comes incredible power and flexibility. The Drupal theme system creates the perfect storm of complexity, UX and control from the interface. Drupal theming isn't easy, but even the layman can do incredible things through pointing and clicking. And if you want to do things The Drupal Way, it's vitally important to learn to let Drupal do what it can from the interface (before even thinking about touching code).

We all have to admit that CSS has some shortcomings. Thanks to the adoption of CSS3 and increasing standardization between browsers, this is getting better. During a recent course on responsive theming, I discovered a neat trick to trigger a click effect on elements in a mobile browser. It utilized the common css pseudo-class :hover, but when you add some CSS3 transitions it starts to get really interesting.

I consider use of a base theme to be Level 2 theming because this should mean that you've either grown enough or failed enough as a themer to want to do things the Drupal way. That means no longer hacking core and saving yourself a ton of hassle. You can let Drupal do the work for you and still make the theme your own!

The Evolution of a Themer

In Level 1 we introduce the anatonmy of the theme and the files you'll find within. We walk through creating your own basic theme and introduce the concept of sub-theming.

In the "evolution of a themer", this is where the fun really starts. Up until now you may have downloaded a contributed theme from Drupal.org, maybe you hacked the theme a bit to make it your own but you've never made your own theme. This blog post is all about reaching Level 1 and creating your own basic theme from scratch.

Co-presented by Andrew Berry, Lullabot.

The trend towards a "mobile first" use of the web is showing no signs of slowing down. It's no longer enough to have websites that are functional on mobile. They must work well and feel natural on mobile devices to attract and keep visitors.

I love theming Drupal sites. Yes, I realize that means I’m a super nerd. Drupal’s theme layer with its system of overrides is powerful. It works so well that I rarely need a starter theme, like Zen, Basic, Framework or NineSixty nowadays, other than as a reference and source of code snippets.

Drupal 6 provides many avenues to modify its appearance, including ways to theme a form. Recently I themed all node edit forms at once. I will share here how I did it.

The usual route to theme a node edit form, or any form for that matter, is to grab the form ID, which is used as a theme hook, and implement a hook_theme function in template.php in the theme.

This lets you alter the theme registry to add a template file for a specific form. There are many blog posts that go into more detail than I do here on how to theme forms in general.

The above is useful if I want to theme a blog content type or the user registration form, for example. Most sites have at least a few different content types. I wanted to make alterations to all node forms at once and use a single template file. This involved a slightly different approach.

Correction: This next step with the theme_registry_alter example is not necessary. See comments below this post.

There is a theme_node_form theme function in Drupal, which is called by all node forms. I wanted to replace or supersede this theme function with a template. I tried to do this with hook_theme, but it continued to pick up some parts of theme_node_form in addition to supporting my template file. So it called the form array twice, causing recursion; which is not what I expected. So instead I took a colleague's suggestion and altered the theme registry via hook_theme_registry_alter(). This seemed clean and simple enough.

This takes the node_form theme hook and changes it from a theme function to a template, in sites/all/themes/MYTHEME/template.php:

This worked great. But I hear that hook_theme_registry_alter is intended for use in modules only? If you know why, please chime in with a comment. Or leave a comment on the theme registry for special cases handbook page.

And the fun part... Spiffing up the node edit form

Here is what I did. This creates two columns for the form and places all top level form fieldsets on the right.

Screenshot:

And here is how I did it...

Just a little to the left please. Flip it around. Put that on top of this. Call it by a different name. It is the little changes, that seem trivial and small, that often end up being real headaches to make and support our clients in making. Do we really want to try to build capacity with clients by teaching them to adjust #weight in hook_form_alter?