April 2011

Apr 26, 2011

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!

Apr 19, 2011

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!

Apr 12, 2011

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!

Enjoy!

Apr 5, 2011

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