Customizing the Drupal 6 LiteJazz Theme - Theming Views 2

Submitted by nigel on Sunday 11th October 2009

The Views module is just about a prerequisite when building meaningful Drupal 6 websites. However, despite it being extremely flexible and powerful, there are limits to what can be achieved. As a starting point for developing some themes for Views 2. You will see a few useful features, viz CD covers flipping from left to right alternatively, zebra stripes on each row, customized formatting and the removal of labels. These effects combined cannot be achieved without themes.

To start this exercise, I have created a custom content type called a CD Review which contains additional CCK fields such as the CD's Amazon product number, the artiste name etc. All the required fields have been added to a new Views 2 view called cd_review, and this is saved with the Basic Settings->Style option as unformatted. The output this provides is the closest to what we want so it is a good starting point. Now, click on Basic Settings->Theme: Information. This will become your friend - the information presented here is paramount to achieving our goal.

This is Views 2 strength - you will see a list of types of output - and the template files used to generate that output. The top example is Display Output, and to its right is a list of all possible template files for the display output. The first, views-view.tpl.php, is emboldened which means it is the template currently used. The remaining template names are the other permutations.

We'll create our own row style output first, so looking at that entry, we can see that this file, to be dedicated to the cd-review content type, should be views-view-fields--cd-reviews.tpl.php. That looks weird - why does Drupal stick two consecutive hyphens in the filename? I honestly don't know. Anyway, since I'll be creating numerous themes for views for all my content types, I'll create a dedicated views subdirectory in my beezee theme to keep everything neat and tidy.

$ mkdir sites/all/themes/beezee/views
$ cp sites/all/modules/views/theme/views-view-fields.tpl.php sites/all/themes/beezee/views/views-view-fields--cd-reviews.tpl.php
To alternate colours between rows in the view, we need to flip between css div containers. First step is to insert the PHP code into views-view-fields--cd-reviews.tpl.php. The first section of code goes before all the other code (but after the comments). The second section goes at the end of the file.
<?php
print $variables['zebra'] ? "<div class='views-odd'>" "<div class='views-even'>";
?>
<?php
print "</div>";
?>
But we need to be able to set $variables['zebra']. How do we achieve this? By using a preprocess function which is placed in the beezee template.php file, that's how. The zebra variable is flipped dependent upon a static variable each time a row is printed. Note how the hyphens in the tpl filename have become underscores in PHP. So, insert into template.php:
<?php

function beezee_preprocess_views_view_fields__cd_reviews(&$variables) {

  static 
$zebra FALSE;
  
$zebra = !$zebra;
  
  
$variables['zebra'] = $zebra;
}
?>
Next we need to define the css in the beezee theme's style.css file. Most of this is self-evident and doesn't require further explanation, but take a look at the view-content element. By default, Views displays a list as ul,li HTML so we need to override these values.
.views-odd, .views-even {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: -10px;
    margin-left: 0px;
    padding: 10px;
}
 
.views-even {
    background-color: #fff;
}
 
.views-odd {
    background-color: #eee;
}
 
 
.view-content .item-list ul li {
    list-style-type: none;
    margin: 0 0 0 0;
}
Back to the views-view-fields--cd-reviews.tpl.php file - we don't want the field labels so comment out the relevant line of PHP code, and remove the colon from HTML at the end of the same line. Look for print $field->label; and comment this.
<?php
//print $field->label; 
?>
Now change the field css to values you like and add them to the beezee style.css file. My values are below, but feel free to change them as you see fit. The simplest method of obtaining these field value names is to inspect the HTML source code from your browser.
.views-field-title  {
    font-weight: bold;
    font-size: 120%;
}
 
.views-field-field-artiste-value  {
    font-style: italic;
}
 
.views-field-changed {
    font-style: italic;
    font-size: 80%;
}
Since we took out all the label fields, we really need to add back a "Last edited on" label for the last edited date and time. To do this we need to override the output template for that particular field. So copy the default template and change the filename to reflect the field
$ cp sites/all/modules/views/theme/views-view-field.tpl.php sites/all/themes/beezee/views/views-view-field--changed.tpl.php
This views-view-field--changed.tpl.php is very simple - it just uses a PHP print function to output the field. An easy fix for us here - just add the string literal. So the statement will be:
<?php
print "Last edited on: " $output
?>
Next we want to alternate the cover of the CD between left and right; this will be achieved with using css float left and float right. There are three steps to this - 1. Create the necessary css tags, 2. Modify the tpl file to output the image and the div float, 3. Add a preprocess function to template to flip the image from left to right. Ok, so step 1 has actually already been completed in an earlier exercise, but for completeness the css is listed below. It should be inserted into the beezee theme style.css (if it isn't already there).
.cover-right, .cover-right-teaser {
  float:right;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  clear:none;
}
 
.cover-left, .cover-left-teaser {
  float:left;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 0px;
  clear:none;
}
 
.cover-left img, .cover-right img {
  width:200px;
  border-width:1px;
  border-style: solid;
  border-color:black;
}
 
.cover-left-teaser img, .cover-right-teaser img {
  width:100px;
  border-width:1px;
  border-style: solid;
  border-color:black;
}
Step 2 is to produce an override template file for the teaser CD Cover field, and to add the div container to float the image left or right. So create it first with a copy, then amend the code to reflect below.
$ cp sites/all/modules/views/theme/views-view-field.tpl.php sites/all/themes/beezee/views/views-view-field--field-cdcover-fid.tpl.php
<?php
  
print "<div class='cover-";
  print 
$variables['cover_lr'] ? "right" "left";
  print 
"-teaser'>" $output "</div>";
?>
and then create an additional preprocess function in the template.php file, just like before. The logic is similar to before also.
<?php
function beezee_preprocess_views_view_field__field_cdcover_fid(&$variables) {

  static 
$zebra FALSE;
  
$zebra = !$zebra;
  
  
$variables['cover_lr'] = $zebra;
}
?>
Now all you have to do is clear the cache and everything should be fine!
blog terms
Drupal Drupal 6 Litejazz