Drupal 6 Theme Positioning

Drupal 6 is pretty close to release. Drupal 6 themes are one of the areas of change: how to create new ones, and how the tagging and styling works. I’ve done quite a bit of work in the past with themes so I was interested quite a bit in taking a look at what is new and improved. I’m going to take my Troopers theme and port it over to Drupal 6 and while I’m doing that I will move from a table based layout to a pure CSS based layout.

If you recall my Troopers skin is an homage to Lucas Arts’ Republic Commando game. A great game deserves a great skin. There are some unique features of the skin that make it difficult to create. It has a three column “liquid” layout where the header region is divided into two sections. This allows the left column to have a navigation bar that stretches from the top of the page to the bottom. The page can be infinitely wide so the header graphics have to account for this as well. In my design the left edge expands and contracts under the left nav panel. The header region is also made up of multiple graphics so they have to be layered and positioned just right or the expand/contract stuff gets all screwy. The other complexities are with the coloring of text. You need to have a ton of extra styles so that hyperlinks and stuff all work well in the various colored regions.

Drupal 6 (currently in RC3) has reworked some of the fundamentals for how themes are created. I’m going to use the Zen theme as my starting point. I have a choice to create a completely new theme or a subtheme. I did a bit of experimenting with the subtheme concept, however this seems to be a way to quickly make a skin that is really only a derivant of the base theme. If you want to make some CSS changes to colors and some slight positioning changes then this is good, but for more radical changes it is probably not the things to use. I’ll go with a completely new theme based on Zen.

Getting Started

To get started go into your themes folder and copy the zen folder, renaming it whatever you like (no spaces or weird characters). I’m naming it “troopers”. I’ve got my theme from Drupal 5 so I’ll copy over my “images” folder and all the “screenshot” images from the main folder. These last images are what you see in the admin console when selecting your theme. After you do that rename any files named zen with your theme’s name, except the zen.info file. For example I’ll rename zen.css to troopers.css.

The next thing you’ll need to do is start editing code. You can use anything for this, but I use Aptana Studio – a great open-source product based on Eclipse. You need to go into your .info file and update the references to “zen” with your theme’s name. Then go into template.php and find the reference to “zen.css” and changes this to your skin’s css file (in my case troopers.css).

At this point go into your Drupal admin console and see if your theme is listed and then actually activate your skin and see if you get something to happen. You should get the basic zen skin look on your site. If things look funky then you probably messed up something – don’t panic. If all the content blocks are trailing down the left edge of the screen, this means Drupal is not finding your style sheets correctly…use Firebug to confirm this and then check your changes.

Changing The Look

Isn’t that Zen theme nice looking? Er well…no…that’s not the point. The Zen theme is a starting theme, not a theme for real use. There are two things we are going to focus on to get our Troopers look: modifying the troopers.css and modifying the page.ptl.php template.

Messing with Drupal’s CSS is easy once you know a few things:

• Use Firefox (IE sucks…).
• Get Firebug and use this fantastic tool to probe and learn the drupal CSS tags.
• Learn a full featured programming IDE.

Once you have these tools there are a couple of CSS pages to take a look at. If you need a tutorial on CSS positioning check this link. You really need to have a decent understanding of how this stuff works.

The “troopers.css” and the “drupal5-reference.css” are the ones to look at. The first is of course the main style sheet that we will use to over-ride Drupal’s default styles. The second file is a master list of all the styles. Drupal use a number of style sheets so it is handy to have them all in one file for reference.

Drupal 6’s Zen theme has two supplied layouts a fixed two column layout and a “liquid” three column layout. I’m going to just go with the flow (sorry that’s a lame joke) and use the liquid layout – you can select this on the configure screen for your theme. If you look in the liquid-layout.css file you can get an idea for how the page is constructed and how the positioning works. I messed around a bit with a few color changes and padding stuff. Here’s what my skin looks like:

All my changes are going into my troopers.css. This is important because if I totally mess up something then it is easy to fix by just removing the file. My basic approach will be to create a new div structure that places the logo block and the left sidebar together and another div block for everything else except for the footer. Using float settings and positioning settings I can then re-arrange things like this:

You’ll notice I have some really attractive colors temporarily in place to help me see where the parts are going. It is very helpful to really study the layout css files too see how to change things. Then use firebug to “live edit” the page. You can click in the frebug css settings and change them and the page will actually change. That is killer!

Then for really making changes and moving blocks around, use a real programming editor that can show you exactly where the start and end tags are for the block you want to move. It is very easy to cut an extra div tag or leave one behind. I recommend Aptana Studio 1.02 with the PHP plugin. Very nice tool.

Moving blocks around is simply a matter of looking in page.tpl.php and cutting and pasting things around. I made two new div tags called “trooper-left” and trooper-right” and then I just cut/paste blocks where I wanted them. Then I created two styles in the trooper.css:

#trooper-left
{
background: #ccffcc;
position: relative;
float: left;
}

#trooper-right
{
background: #ffccff;
position: fixed;
float: right;
margin-left: 180px;
}

This gives me two major regions, floated to the right and left, and where the right region has a margin restriction wide enough to let the left column show. Fairly simple. In my next article I’m going to show how to get the graphics to layout properly. This is going to be a major challenge. I tried this before, but could not get it all to work cleanly so be patient if my next post takes a few days.