Customize a Drupal Theme

For many personal sites and some small business sites, you may simply want to use one of the out-of-the-box Drupal themes available. There are several to choose from: bluemarine, chameleon, marvin, garland, minnelli, and pushbutton. If you want something slightly different, it's easy to customize a drupal theme.

I chose the bluemarine theme but I wasn't happy with it's default implementation. For one, I wanted to add custom block regions so I modified the theme for that. I also just noticed that Drupal has multiple h1 tags so I'm going to modify it to get rid of the one in the header right now.

  • Step 1 - Copy the entire theme directory to your own themes area. For example, since I'm using bluemarine, I want to copy themes/bluemarine to sites/all/themes/[newname], e.g. sites/all/themes/mybluemarine
  • Step 2 - Change the .info file to match your new theme name. For this example, change bluemarine.info in your new directory to mybluemarine.info and edit it to change the "name" to "My Bluemarine".
  • Step 3 - Edit the theme files however you want. In my case, I want to get rid of the extra h1. Grep'ing for h1 in the files, I find it in the page.tpl.php file. It has <h1 class='site-name'... so I will want to change that. I will change it so on the home page, it's an h2 and on other pages it's a span tag. The code looks like:

    Before:

          <?php if ($site_name) { ?>
            <h1 class='site-name'>
              <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>">
              <?php print $site_name ?>
              </a>
            </h1>
          <?php } ?>
    

    After:

          <?php if ($site_name) { $tag = $is_front ? 'h2' : 'span'; ?>
            <<?php print $tag; ?> class='site-name'>
              <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>">
              <?php print $site_name ?>
              </a>
            </<?php print $tag; ?>>
          <?php } ?>
    
  • Step 4: - Switch over to your new theme on the /admin/build/themes page

Now you can see how easy it is to customize a drupal theme. So, pick your favorite one and change it to suit your needs.

I'm a Speaker at DrupalCon Austin

I'm a Speaker at DrupalCon Portland