In today’s excercise, we are going to adapt some nice styles to the Drupal menu items. There is a widely known CSS technique called sliding doors which became very popular since it became published. We are going to spice this a little more with extra hover states and implement sprites to improve the performance a little. This will involve a little PHP code – overriding a themeable function, and some CSS markup.

Let’s start with a piece of generated html code:

This is how Drupal renders primary links. Notice the active menu item which is set by a CSS class active on both the <li> and <a> tags. Since the anchor element’s parent is set to a class, it makes extremely easy to theme nice menu items.

Let’s create a background image for the tabs. Our tab will have four states: one for a regular item, one for hover, and both of them once they’re .active. I prefer using sprites as this will improve performance a little: loading several little images takes more time than loading one bigger image which holds all the necessary background elements.

So I decided to come up with this tab image.

As you can see, it holds all the four states and includes the right slice and the left slice of the background. The right element applied to tag a and the left to tag li. This is very easy, but there comes IE which cripples down every great CSS idea since it can only apply hovers to element a. Now what? As we still need two different elements to be hovered, we include a span element inside every a.

Thus we need a HTML like this:

Now we can reach the span tag via CSS using a span and a:hover span declarations. To have Drupal generate this HTML code we need to add a little function to the template.php file of your theme.

Of course you have to put your theme name where ‘yourtheme’ was used above. I only copied the standard function and modified the $output line a little. According to the function l we had to set the last switch to TRUE since the link text now includes HTML (the span tags).

Now let’s see the CSS code. I won’t explain fancy stuff from now on, just copy & paste my css used in Ubiquity for tabs. As we’re theming primary links, we encapsulate every style declaration in the #primary div to avoid globalizing these settings.

First, position and style the menu items:

Notice the brilliant Mac IE 5 Backslash Hack which promotes IE 5 on Mac still a usable browser :)
Now here comes the part dealing with hovers and active states:

As you can see, we can do hovers with span tag inside the anchors and dealing with sprites is very easy, just tell the proper background positions in each state and you’re set to go.

Download the sample code, experiment with it, and let me know how far you went with it.

Most of you reading now aware of that it’s said: Drupal is a great CMS. It is a completely flexible platform and serves as a great foundation to build nearly any kind of website. It has a well structured system which nearly completely separates code, content and style. Perhaps this flexibility causes most issues when dealing with theming. Creating templates for Drupal is wonderfully simple when it comes to the basics. Vast documentation and a helpful community stands there for the template developer but there are so many possibilities and so many available options that it’s often not enough.

Apart from creativity, developing themes for Drupal needs a widely open brain who understands the logic behind the scenes and can take the advantage of flexibility. Indeed it needs both a designer and a developer in mind.

During one of my latest works I realized why the majority of Drupal themes are very similar, because its developers don’t take their time to go beyond the basics. I believe this is a must if you wish to create something that you want to be outstanding from the crowd. Nada to say Ubiquity isn’t that outstanding that way, too. As you can see it only serves basic needs but it might be a nice base for customizing.

Anyway, I decided to publish some of my theming tricks, bits and pieces what I used before. It will cover css, php and Drupal. I mostly use the core PHPTemplate engine. Why not using some of the custom engines like Smarty? Smarty is great but I believe performance is really what shouldn’t be overlooked and the richer the template engine is in features the faster it will die under high load. PHPTemplate is just fine for what we do.
Cut to the cheese

Enough said, let’s deal with taxonomy display.

Taxonomy is the method of content classification. Basic themes usually utilize a very simple display of taxonomy terms when showing a node. Just look at this post, under the title, it comes submission info and associated terms.

I recently developed a real estate website for my client and she had a simple demand. Show vocabulary names along with terms with the property pages in a badge like fashion or something like a table. There are a couple of vocabularies and each has a set of terms regarding the type, place, size and price range of the property like this:

Place
-> Here
-> Other place
-> There
-> Over there
-> Theremost

Type
-> Flat
-> Castle
-> Roman
-> Gothic
-> etc...
-> House

and etc. What we needed is to display these categories as a table to represent the classification of the property. But since we don’t need tables in teasers we create a list as well.

I included this into template.php:
<?php
function _phptemplate_variables($hook, $vars = array()) {
  switch ($hook) {
    case 'node':
      // we are dealing only with 'property' node type
      if ($node->type == 'property') {
        // and if there are any assigned terms to that node
        if (count($node->taxonomy)) {
          $terms = taxonomy_node_get_terms($node->nid);
          // getting each term assigned
          foreach($node->taxonomy as $term) {
            // get the parent term
            $parent = taxonomy_get_parents($term->tid);
            $prefix = @array_shift($parent)->name." / ";
            // get the vocabulary of the term
            $term_vocabulary = taxonomy_get_vocabulary($term->vid);
            // construct table row for table
            $rows[$i++] = array(array('data' => $term_vocabulary->name.':', 'class' => 'name', 'header'), array('data' => $prefix.$term->name, 'class' => 'value'));
            // construct unordered list for teaser
            $list[$i] = $term_vocabulary->name.': <strong>'.$prefix.$term->name.'</strong>';
          }
          // build the variable for tpl.php pages
          $vars['property_infotable'] = theme_table(NULL, $rows, array('class'=>'property-info'));
          $vars['property_infoteaser'] = theme_item_list($list);
        }
      }
      break;
    }
  return $vars
}
?>

This creates a $property_infotable and a $property_infoteaser variable for the tpl.php file used for the property node type. Now we have to construct a node-property.tpl.php file like this:
<div class="whatever class we need" id="if-we-need-an-id">
  <?php if ($page == 0): ?>
    <div class="property-teaser">
      <div class="info">
        <?php print $property_infoteaser; ?>
      </div>
        <?php print $content; ?>
    </div>
  <?php else: ?></p>

<p>  <div class="content">
    <?php print $property_infotable; ?>
    <?php print $content; ?>
  </div>
  <?php endif; ?>
</div>

And that’s it. If a teaser is viewed, only the infoteaser shows up, and on the full node view we see the table. We only need to style the appearance, but this is out of the scope of this post. Styling heavily depends on placement, but a short css to include for the $property_infotable is here:
/*  property infotable  */
.property-info {
  width: 250px;
  float: left;
  margin: 10px 12px 8px 0;
  font-size: 88%;
}
.property-info .name {
  text-align: right;
  padding: 6px 8px;
  width: 45%;
}
.proprerty-info .value {
  text-align: left;
  padding: 2px 8px 3px 0;
  margin: 0;
  font-weight: bold;
}

This would produce a small table like this:

I hope you find this useful. No big magic here, just a couple of small tricks that might come useful. Any feedback would be appreciated.