Drupal 6 Troopers Theme Complete

I’ve completed my Drupal 6 conversion of my Troopers theme. I had a couple of goals when I started this port from the 5.x platform:

1. Get it working on Drupal 6 – duh…
2. Move to a pure CSS layout keeping the existing layout.

I was pretty confident the first goal could be reached, however the second I knew would be difficult. Ultimately I succeeded in porting over my skin, but did not achieve a pure CSS layout. In this post I’ll show you a bit about what I did and provide a download link for my theme.

So this has been more of a big deal than I thought it would be. If you read my initial post on Drupal 6 positioning, then you’ll know that I had the basic layout working for my theme. However what I determined is that my layout is just too complex to get it working quickly with CSS. I’ll admit that I’m not the world’s expert in CSS. I find CSS to be a pretty tricky thing, its not explained well, and despite all the best intentions I don’t think it is very straight forward (sometimes I believe Java’s GridBagLayout is easier to understand and deal with). If you look at this I have a simple table layout modified from my original 5.3 design.

Here’s my original layout for the 5.3 design:

Its a fairly complex design because the left column is heavily nested. For this version I decided to break out the left edge into a separate column and go with three main columns for the view. I then also made some pretty hefty optimizations to the header region to simplify the styles and layout between the searching stuff, the header bars, images, and breadcrumbs.

My final layout of major components in Drupal 6 is slightly different. What I did was break the table into two major columns. The left sidebar and the extra space to the left of that are in one column and then the other column contains most of the header, the content area, and the right sidebar. This seemed a bit more efficient to me. During this little “tewaking” I removed a lot of tables and columns. This makes the skin much easier to maintain.

I’ll admit that I’m a bit disappointed that I did not figure out how to do all this with pure CSS. I’m going to keep trying. I think perhaps that I’ll try another base theme as a starter. Zen comes with a lot of other stuff that I don’t need – for example the subthemes stuff. Perhaps there are other skins that I can use as a starting point.

The last thing I’ll do is both apologize for the length of time it took for me to finally do this – I had a bunch of things going on – i’ll post some detail in another post in case you are curious. So what’s the other thing? Well, I’ve attached my complete theme here. It is not perfect and I will tweak it all the time for CSS and coloration.

Overall – here are my suggestions for Drupal theme design:

• Use Firefox and the Firebug extension
• Learn CSS and practice this outside of Drupal
• Design a basic layout of what you want outside of Drupal
• Pick a theme that is a good starter. I used Zen, but this may not always be a good choice.
• Remember that nothing can be perfect and never forget to have fun or else you will just end up whacking your head on the nearest pointed object.

Here’s my current theme. When you download this change the file extension back to zip. WordPress does not allow zip uploads so I had to change the extension.

To grab this file don’t just click on it. Right click and select “save link as” and then download it.

troopers.png

I’ll continue to update this – if you have comments please post them.