drupal planet

This week, we wrap up our fourth chapter in "Drupal Theming Essentials", we begin by covering how to include CSS and JavaScript files based on virtually any condition. Want to add a new stylesheet when your Aunt Betsy visits your site? Want to highlight articles with the word "awesome" in the title? No problem! We cover three common scenarios, and give you the tools to come up with your own conditions as you need them.

We also begin our 5th chapter, called "Template Files, Theme Function Overrides and Preprocessing Functions" with a video explaining the potential benefits of finding other ways to tackle Drupal theming tasks than using template files or theming functions when you can. Then, we launch right into discussing how to use template files, and figure out core template file suggestions.

Below are the new videos, enjoy!

When one begins building a theme, it's only natural to use one CSS file for everything. But that stops being fun after about 1500 lines. At that length, it becomes a serious task to grasp what's happening in the file, and the chances of a team member changing the wrong style inadvertently becomes greater.

This week, we spend a full 4 videos learning from some of the best examples in CSS stylesheet management so that when your stylesheets begin to plague your dreams, you have somewhere to turn.

As we begin to wrap up the series on theme file structure, and move into working with templates and theming function, we're going to spend a couple videos clearing up some of the areas we glossed over in previous videos. This week, we cover how to granularly enable or disabling toggling of thematic elements (not the kind that bumps a movie rating up to an R) with 'features'.

Here's a list of the new additions. Enjoy!

Building a Drupal theme from scratch isn't for everybody. For most of us, sub-theming is the way to go because it leverages existing code and resources while still giving us the flexibility to extend the theme with styles and overrides. This week, our videos begin by going over just how to override just about anything from a sub-theme and demonstrate overriding a few key elements.

But for some of us, sub-theming isn't the right fit either. We need to lock down our theme so we know what's going on in there, or maybe we need to flip some of the structure around, but we still don't want to start from scratch. For us folk, we can instead start by copying an existing theme and making it our own, and in our next couple of videos we do just that.

We finally wrap up by beginning a two-parter video on CSS file structure and cover the rationale behind how to split up stylesheets for your theme.

Here's a list of the new videos. Enjoy!

We've been building up to this moment for a while now. For the last several weeks, we've demonstrated how to create a theme from scratch, including working with the .info file, how to add a screenshot and overide the page template file. This week, we throw that all to the side and show you how to build a beautiful theme with a single file, through the clever use of something called "sub-theming".

Before we do away with the theme scaffolding we've been working so hard on, we're going to explain what the famed template.php file is for and how it helps maximize themer sanity. We then look at several template.php files from Drupal core themes to get a feel for what you can do in that logical haven. Finally we demonstrate how to use the template.php as a better place to put some poorly-positioned logic from a previous example.

When we finish up with template.php, we'll thoroughly explain that while what we've been working on for the past couple of weeks is a perfect learning exercise, it's usually much quicker and more efficient to use an existing theme as a starting point for your custom theme. We first discuss the benefits of sub-theming, and then leap right into making our own sub-theme.

Enjoy the new videos!

If you've been enjoying the theming videos so far (more than 30 and counting), this week is going to be a fun one. We start off by explaining the most essential visual building blocks of a theme - regions - and work through how to add regions to your theme (FREE video) and use them in the Drupal user interface.

Regions are important, but they're not so much fun without styling. Our next step is walking you through adding a simple CSS file to your theme, followed in quick succession with how to add a JavaScript file, in which we explain the rationale behind adding JavaScript to a theme.

Finally, we show you how to extend the default theme settings page options to add your own settings, allowing other users to be able to manipulate aspects of your theme without having to touch theme code. Sweet!


Last week we set the foundation for building a theme file structure, learning from popular themes such as Zen, Fusion and Basic. This week, we get our hands dirty with basic theme building. We begin by looking at the .info file and explain the various options that can be used. For those of you who have already watched the module .info file videos, you have a head start, but there's some unique properties to a theme info file you might want to check out.

Next, we create the base theme file structure and enable the theme (FREE video). To give site builders a sense of what your theme will look like when enabled, we then walk you through creating a screenshot and adding it to your theme. Next, we'll show you how to add a default logo. Finally, we'll demonstrate the proper way of overriding the page template file within your theme.

Next week, we've got a nice series of videos lined up to further extend our built-from-scratch theme, including:

  • How to add a new region and what regions are
  • How to add a CSS file
  • How to add a JavaScript file
  • How to add a new setting to the theme settings form
  • How to set a default for a theme setting and use it in a template file

Being a coder certainly has it's benefits. But without critical theming skills, you can start to feel a little like a sandwich without tomatoes. Or a crossbow without arrows. Or a pair of pink sunglasses without sequins glued on them. Or a ... well, you probably get the picture. But, if you do get the picture, can you theme it?

We're moving steadily forth into our 5th week of theming videos, and things are starting to get interesting. After laying down the basics like knowing what the theme layer is for and how to find the source of any output in Drupal, we're starting to peek into some theme folders and see what treasures lie within. Theme directories are a wildcard, you have a lot of freedom to set things up in a multitude of ways. But that freedom comes at the price of sometimes not knowing where to start.

This week is dedicated to theme file-gazing. We first look through the core Drupal themes and see how they have their files set up, and then we move onto four of the most popular contributed themes: Zen, Basic (a Zen offshoot), Fusion (FREE video) and Marinelli. Each theme has unique strategies and lessons to teach, and will help you get a feel for where to start as you develop your theme or modify an existing theme.

Next week we'll be getting deep into code, leveraging all of the tools and techniques we've reviewed this last month and begin to build an entire theme from scratch.

Resource pack has been updated

Several issues have been fixed in the source code resource pack, so please download the new version if you're following along.

Thanks, and enjoy!
Chris Shattuck

Themes are touchy beasts. A line of funked-out CSS or a misnamed template file can send you careening down a path of sadistic uncertainty if you don't know what you're looking for. Well, here at Build a Module.com we think that's a little unfair. We should be able to change how our sites look without fear of wasting an entire day barking up the wrong tree, and this next batch of new videos is all about absolutely crushing that fear.

To begin with, we dive into some theme troubleshooting, looking at what happens when some HTML output you're trying to modify is getting lost in the shuffle. Next, we help you troubleshoot CSS issues, where styles you're trying to add just don't seem to be working. Since these last two videos are part the first chapter in our Drupal Theming Essentials series, we wrap it up with a review of the rich theming topics we've covered and some suggestions for next steps.

But wait, that's not all! We also begin our next chapter - aptly titled How to Build and Modify a Drupal Theme or Sub-Theme - with an overview of the themes that come with Drupal, along with a couple other core theme resources and a guide on where to put new themes. We then take you on a tour of the different components of a theme, including the .info file, the template.php file and lots more.

Next week we'll be diving into how to structure a theme directory and take a look at several interesting examples in both core Drupal and contributed themes.

Spread the code "springbreak2011" for FREE form-building videos!

Spring break is a time where people work on their form, right? Sun bathing, surfing, lounging about. As a conciliatory prize for those of you returning from spring break, or suffering in some other way from the end of those blissful days, we are offering all of the videos on our site that have the word "form" in them for free this next week. But only if you know the code.

If you know anyone that could benefit from a little Form API action, send a little tweet gently encouraging them to go to https://buildamodule.com/code and enter the code springbreak2011. That will grant them free access to form-building videos until March 28th, no strings attached!

Thanks and enjoy!
Chris Shattuck

This year's Drupalcon was most excellent! I had the opportunity to meet a number of current and soon-to-be subscribers, and get some feedback on what you'd like to see in the future. Overall it seems like we're headed in the right direction, and I wanted to thank you so much for all your great ideas and insights. I'm looking forward to more face time at the next Drupal event!

As we complete the first chapter in the "Drupal Theming Essentials" video series, we demonstrate how to work with view modes in the Drupal user interface, how to leverage field formatters to re-use themable output on the field level, and discuss various standards around working with the theme layer. If any of that sounds a little foreign to you, don't worry, these videos will gently introduce you to each concept.

How to adjust node view modes through the user interface
Last week we talked about what view modes are, and in this video we take it a little further to explore what can be done with view modes in the Drupal user interface. (subscriber-only)

What field formatters are and how to use them to modify field output
Field formatters are a great way to modify the output of a field in a reusable way. In this video we look over the existing user interface for working with field formatters to get a feel for what they are and how you might use them in practice. (subscriber-only)

How coding standards apply to the theme layer, and how to add comments to template files
Coding standards are critical for working with other team members on a project, and in this video we look at how standards apply to the theme layer, as well as some best practices in writing comments for template files. (FREE today only!)

Template file coding standards and conventions
Template files are one of the most important interfaces between designers and developers. Here we delve into how to write template files in such a way as to make it as easy as possible for themers to make changes without having to dig into heavy development work. (FREE today only!)

How to apply CSS coding standards
The CSS standards are currently in draft status, but they can give you some tips on best practices when working with CSS, splitting CSS into multiple files, and structuring your CSS definitions. (subscriber-only)

Last week we rolled out a nice little interface upgrade which is subtle enough that I thought it might be good to point it out with huge red arrows. With the new navigation tools, you no longer have to scroll through the (rather large) list of videos to get to the one you're looking for. Instead, just use the arrows to move forward or back, or click the list icon to display a pop-over will all the videos in the current series you're viewing, plus navigation to switch series' as well. If you're spending a lot of time on Build a Module.com, then you should notice a pleasant productivity boost.

Interface improvement with big red arrows

The new Drupal theming videos

This week we release our second batch of "Drupal Theming Essentials" videos. In this one, we tackle a couple of hairy questions about where to put the code you use to override output, discuss a couple of essential theming tools, and discuss view modes - a handy way to modify node output code-free. Enjoy!

How to decide whether to use a module or a theme for your modifications
When using a theme function to override output, is it better to put your code in a module, or in the template.php file? In this video we give you a solid answer to this sticky question. (subscriber-only)

How to decide when to use a theme function or template file
Theming functions and template files are both legitimate places to put your output-related logic, and it can be a little painful trying to figure out which one is right for what situation. In this video we provide some clear benefits to each method and match up situations to solutions. (subscriber-only)

How the theme registry works
If you don't understand what the theme registry is or how it works, you will likely find yourself banging your head against a brick wall at some point. Save yourself a metal plate in your skull and watch this succint explaination. (subscriber-only)

How to find out where any piece of output comes from
Finding out which template files or theme functions or preprocessing functions or processing functions are responsible for what kind of output where is super tricky without the Theme Developer module. In this video we dig into this module and show you how to find the origin for virtually any output in Drupal. (FREE)

What view modes are and why you would use them
View modes, previously known as "build modes" in Drupal 6, provide a rich method of consistantly displaying node content in various contexts. Plus, it wraps it all in a nice user interface for site builder types. In this video we discuss the concept of a view mode and how you'd be likely to use them. (subscriber-only)

Syndicate content