Drupal Theming
A standards approach to custom Drupal theme creation
After working with Drupal for over a year now I have learned many different ways to go about creating a custom Drupal theme. I have tried taking existing Drupal themes such as Garland and Blue Marine and hacking them to pieces while inserting my DIVs and classes trying to get things to work and look right. That just creates a huge mess of code and often contains unneeded elements (code bloat = not a good thing).
I've found that the best method for me to create custom Drupal themes is to first code up the site using static HTML/CSS, as in create an index.html file and go to town. I always code my sites using Notepad2 and then view/test them in FireFox. I also use the WebDev Toolbar so I can see how everything looks on-the-fly as I code my CSS. This really helps as I can code a LOT faster and see my CSS changes immediately.
Once I get everything looking decent (doesn't have to be perfect yet) in FireFox I then open the index.html file in IE7 and begin making IE7 specific changes to my CSS so everything looks decent there as well. I then load the index.html file in IE6 and do the same. Once things look the same across FireFox and IE7/IE6 I load it in Safari to see how it looks there. For this site I kinda ignored some issues with IE6 as it's a pain to work with and I'll get around to fixing them eventually.
So once the site looks the same in FireFox, IE6/IE7 and Safari it's time to add Drupal code to our static HTML file. This is much easier than it used to seem to me so if you follow these code snippets you should be all set...
Doctype to
*I included my CSS files for screen and print viewing (screen.css and print.css)
" lang="<?php print $language ?>"> <?php print $styles ?>
Search Box
<?php print $search_box ?>
Logo
<?php if ($logo) { ?>" title="<?php print t('Home') ?>">![]()
" alt="<?php print t('Home') ?>" /><?php } ?>
Main Navigation
<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links) ?><?php } ?>
Header Content
<?php print $header ?>
Left Sidebar
<?php print $sidebar_left ?>
Right Sidebar
<?php print $sidebar_right ?>
Main Content
<?php print $title ?>
<?php print $tabs ?>
<?php print $help ?> <?php print $messages ?> <?php print $content; ?>
Footer
<?php print $footer_message ?>
Closing HTML (Don't forget this!)
<?php print $closure ?>
Once these snippets of code have been added in place of your existing HTML code in the index.html file, save the newly edited file as "page.tpl.php". This is your theme page and every page on your site will have the same layout as this one.
Different Home Page Layout
Say you want to have a custom home page that looks different than all of the other pages. To create a custom home page you need to copy the code from the "page.tpl.php" file and create a new file named "page-front.tpl.php" and paste that code in there.
Now you can edit the code for the "page-front.tpl.php" file to make it look however you'd like. Drupal will automatically detect and load the "page-front.tpl.php" file if it is present in your theme directory.
What that does is tell Drupal that if the user is on the home page to go ahead and load the file named "page-front.tpl.php" rather than the "page.tpl.php" file. Now you can go back to the "page-front.tpl.php" file and edit it as you see fit. This gives you the option to have a different layout for the home page and sub pages.
Now that you have a "page-front.tpl.php" and page.tpl.php" file it's time to copy over the images and CSS from your static HTML site to the newly created Drupal theme directory. So pretty much your directory structure should now look something like:
Drupal Theme Dir:
page-front.tpl.php
page.tpl.php
images/
css/
Now you need to copy the other files in which Drupal relies on to your theme directory. Be sure to copy these files over from the Blue Marine theme (that's just what theme I grab them from).
Blue Marine Theme:
block.tpl.php
comment.tpl.php
node.tpl.php
template.tpl.php
screenshot.png
So now you should have a fully working Drupal theme. You can copy the files over to the server and place them in the "/themes/newtheme" and then log in to your Drupal site through your browser and select your newly created theme. As you can tell immediately there is quite a bit of editing needed to be done to get your theme to work perfectly in Drupal. This is where the Web Dev Toolbar comes in handy again.
So now it's time to edit/tweak your "*.tpl.php" files as well as your CSS. This is a quick and dirty way to get a custom theme up and running but hopefully you get the idea.
Anyone else have an ideas on what I can improve on here or what I didn't really cover much of? I have created somewhere around 10 custom themes in Drupal so I'm sure I overlooked something here. Leave a comment or question and I'll do my best to help you out.