15+ Ways to Debug Drupal 8 (for Front-Enders)

May 17, 2017
At DrupalCon Baltimore, I presented a session on how front-end developers can effectively debug Drupal 8. The session explored some of the challenges front-end developers face getting data fro...
Zakiya

Twig Concepts in Drupal 8 Themes - Part I

April 4, 2017
Twig is a powerful templating engine with many useful features. In the context of Drupal, especially when coming from a Drupal 7 way of doing things, it can be easy to overlook many of these featur...
Jacine

A Better Way to Administrate Drupal - Part 2

April 21, 2016
As with many community-centric projects involving multiple parties, it is always difficult to juggle free time between teammates. Torn between client-centric activities and community-focused endeavors, we finally found a way to make bring all interested parties together. A group of us are all actively involved and eager to make waves in the Drupal administration game.
Casey

A Better Way to Administrate Drupal - Part 1

January 14, 2016
I started an internal discussion with the team about the possibility of contributing an administrative theme to the community. Many were eager to help. A new Slack channel was born, and a impassioned flurry of ideas and concepts came pouring out.
Casey

Why Progressive Decoupling Drupal's Front-End is a Bad Idea

January 8, 2016
Lately there has been much chatter about Drupal including a front-end framework in Drupal core. Dries has written a few times about the concept and has established that he’s interested in a future where Drupal is “progressively decoupled” from its front-end, leaving the front-end rendering to be handled piecemeal by a JavaScript framework like Angular or React. Progressive decoupling, far from being an industry standard, is a concept that has been coined in the last several months. Without a sucessful model to look at, we are staking our future on a reality that only exists in blog posts. The momentum of front end frameworks distracts from addressing more important issues, and has created a miasma of anxiety that Drupal is going to be “left-behind”, again.
Drew

How to Create Custom Theme Suggestions in Drupal 8

December 1, 2015
Recently a team-mate needed to theme a Views exposed filter element from a <select> list into a series of <checkboxes>. Luckily, with the introduction of Twig and the ever-so-useful
Casey

Getting Started with Gulp

July 13, 2015
Much like Grunt, Gulp.js is a taskrunner that aids with automating front-end build tasks. Gulp depen...
Casey

Spreading the Drupal Knowledge

April 6, 2015
The Chapter Three team is getting out and about this weekend to attend two Drupal camps on opposite sides of the country.  These camps are great opportunities to learn new skills and conn...
Susan

A Drupal 8 Festivus

December 24, 2014
In the spirit of Festivus some members of our team attempted a Drupal 8 feat of strength to ensure we were able to thoroughly air our grievances ...
Mark

Ruby, RVM, Gemsets and Bundler/Gemfiles

November 10, 2014
As a Drupal themer, we're often tasked with building multiple sites concurrently. One site may be a new build from scratch, and another could be a site built two years ago that is getting a new fea...
Rob

Leveling Up Your Themer (lvl-0): Contributed Themes & Modules

September 27, 2012

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).

David

Interesting uses for :hover

January 18, 2012

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.

David

Leveling Up Your Themer (lvl2): Base Themes

November 10, 2011

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

David

Leveling Up Your Themer (lvl1): Getting Started

October 16, 2011

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.

David

Presentation: How to Build a Mobile Site with Drupal

September 28, 2011

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.

Harris

Presentation: Front-End Module Round Up

June 2, 2011
There are a number of contributed modules that take advantage of jQuery plugins and HTML5 that can take your site from stale-and-flat to interactive-and-fun. In this session I'll highlight a few of...
Harris

Why I Rarely Use Starter Themes

January 27, 2011

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.

What Starter Themes Do

Drupal 6 saw a jump in the number of contributed starter themes on drupal.org. Now it’s much easier to find a list of all starter themes and there are a few great reviews and a comparison chart. Starter themes are a class of themes that attempt to generalize their features to speed up implementing a design for most any site, while encouraging best practices. They are popular among development teams since they help standardize theming when multiple people must touch the theme. They are also excellent demos of the power and potential of Drupal’s theme system, which makes them a great learning tool and source of documentation. Many starter themes are intended to be used as a base theme, where you create a sub-theme that draws off their files. This makes it easier to produce themes with fewer files and overrides, leaving the base/starter theme to do most of the heavy lifting.

A closer review of contributed starter themes reveals some recurring features, including:

Squiggy

Fun Theming All Node Edit Forms at Once

April 8, 2010

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.

function MYTHEME_theme() { return array(
    'blog_node_form' => array(
     
'arguments' => array('form' => NULL),
     
'template' => 'blog-node-form',
    )
  );
}
?>

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:

function MYTHEME_theme_registry_alter(&$theme_registry) {
 
$theme_registry['node_form'] = array(
   
'template' => 'node-form',
   
'arguments' => array('form' => NULL)
  );
}
?>

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:

Screenshot of modified node edit form.

And here is how I did it...

Squiggy

HOWTO: Fully Theme and Customize the Drupal User Registration Form

February 14, 2008

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?

Matt