Views Theming Tutorial

This is the views theming tutorial. The objective of this tutorial is to present some of the basic ideas behind exactly how views theming is done. In this lesson you'll learn specifically how to theme a table view, a teasers view and a list view. We'll break out of the norm a little with the list view so that you can see just how flexible the system potentially is.

A video has been provided for this tutorial. You may find it here.

Lessons

Table View

A list of items to do, prioritized by end date and color coded by the percentage finished compared with the % of time elapsed.

The Setup:

This is a CCK node with date installed as well. We have two date fields for beginning and end, as well as some other widgets, specifically one to select how far along you feel the node is in the completion process. Due to the way the view is constructed the color coding can actually change on an hourly basis. This was essentially when I was developing this particular view. Obviously this isn't fleshed all the way out, and you can see tons of other potential uses for similar things.

Teaser View

A teaser view of the top 3 news articles formatted as floated divs next to each other to give a 3 column look, and then Placed inside a block to demarcate it from the rest of the content. The example is the home page lessons block. (which you're hopefully using at the moment)

The Setup:

Just a simple story with some taxonomy to put it into the news category.

List View

This list view is designed to work in place of a links page. Frankly, there are some "alright" modules for managing links, but when you combine the flexibility of theming your own "links view" and add to that how easy to manage such a thing is with CCK, there's almost no contest for me personally. I'll custom build every time.

The Setup:

In this case I created a CCK type that is very typical, I included the link module for cck as well, although that will only be required if you choose to do something additional with the content. A text field would have sufficed in this case, but I'm future proofing it. Additionally there's some taxonomy setup. In this example, every header you'll see is actually a taxonomy selection. The page is sorted by taxonomy weight (this is set in the view) and then anything in the category is sorted alphabetically (default). The only thing running this is the function itself, no other code was needed.