In part two of this series, you got into CCK and views. This time around, you will be theming the views and adding a little spit and polish to pretty it up.

Views Templates

Views has a neat feature that allows you to create a simple template file to coerce the ugly default output of views into something more presentable. If you created the CCK fields and Views just like I did in part two you can copy and paste the following code into the appropriate files.

Headline Template

<div class="headline-summary">
	<div class="imageframe"><?php print $fields['field_image_fid']->content; ?></div>
	<h2>Headline</h2>
	<h3><?php print $fields['title']->content; ?></h3>
	<div class="teaser">
		<?php print $fields['teaser']->content; ?>
	</div>
</div>

Paste this code into a file called views-view-fields--Headline--block.tpl.php and copy it to your theme folder. The headline view will now output the image followed by the title and teaser. This convoluted file name is actually specified in Views itself by clicking the Information link for the selected View. I simply looked for the file name that most closely matched what I wanted to do.

Features Template

<div class="featured-summary">
	<div class="imageframe"><?php print $fields['field_image_fid']->content; ?></div>
	<h4><?php print $fields['title']->content; ?></h4>
	<div class="teaser">
		<?php print $fields['teaser']->content; ?>
	</div>
</div>

This is the same as the Headline but this time you need to name the file views-view-fields--Features--block.tpl.php.You should now have a fully functioning Headline and Features list.

Categories Template

This get a little complicated for the categories. In this case, you will need to paste some code into your page-front.tpl.php file. Here is the code.

<div id="categories" class="region">
<?php
/* Enter the ID of the vocabulary which terms you want to show as headlines */
$vocabulary_id = "1";

/* Enter the IDs of any terms that should not be displayed */
$terms_to_exclude = array(1,6,7,271);

/*Enter the name of the view that should show the nodes */
$view_name = "posts_by_category";

foreach(taxonomy_get_tree($vocabulary_id,0,-1,1) as $value) {
if ( !in_array( $value->tid, $terms_to_exclude ) ) {
      print t("<div class=\"category-list $value->description\">\n<h3>" . $value->name . "</h3>");
      print views_embed_view($view_name, 'default', $value->name);
      print t("</div>");
   }
}   
?>
</div>

It simply loops over each Term for whatever Vocabulary you specify. During the loop, Drupal makes a call to the posts_by_category View, which returns the five most recent post titles formatted as links.

Just find a good spot for it in page-front.tpl.php file and specify the commented parameters. That is it.

Styles

The last thing you need to do is a few styles to the stylesheet to make everything look nice and tidy. See the attached files for a full example.

Wrap up

It does not take much to style your views if you know file to create. In this case, just a few lines of code did the trick. With a little CCK and Views you have managed to create a dynamic Magazine-style layout for Drupal that is robust and structured.

Download the Framework theme with styles and View templates