Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Drupal Tutorials and How-to Support Articles

An Intro to Drupal Views Templates and Theming

viewsOne of our students is learning Drupal and trying to master Views. They wanted to know how to style different areas of each Views. We wrote this tutorial as an introduction for them to templates and theming for Views.

As our example, we're going to use the "Front page" view, which is on the defaults available when you first intall Views.

media_1364402102543.png

Here's how the view appears:

media_1364399462465.png

Let's see how we can modify that view.

  • Go to the editing screen for the Front page view.
  • Look in the Advanced area on the right-hand side.
  • Click Theme: Information as shown below.
media_1364399506137.png

You'll now see a pop-up with all sort of useful information about Views theming.

Views is suggesting files that you can use to override the default display.

The files in bold are the ones that are actually being used. In this example, Views is using views-view.tpl.php and views-view-unformatted.tpl.php. The other files names are simply suggestions.

media_1364399522164.png

Where are those files located? In /sites/all/modules/views/theme

media_1364399697209.png

If you want to modify these files, copy them into your theme folder, as below:

media_1364400016434.png

Let's test to see if our changes take effect.

  • Open up views-view.tpl.php for editing.
  • Make a change to the file. Here's one simple (although childish!) change:
media_1364400044441.png
  • Save views-view.tpl.php
  • Go to Configuration > Development > Performance > Clear all caches to make sure that your change is visible.
  • Check your frontpage view to see if your change has taken.
media_1364400074911.png

Because we edited views-view.tpl.php, the above change applied to all of our views, not just the frontpage view.

If we wanted to get more specific, we should change the name of views-view.tpl.php to views-view--frontpage.tpl.php. This name was suggested earlier in this tutorial in the Views pop-up when we clicked Theme: Information.

We can also change the text we added to the view.

media_1364400150555.png

We can also make more substantive changes. For example, we can add a div to various elements of the page:

media_1364400857684.png

We can then add some CSS to our theme's CSS file:

media_1364400876427.png

And that CSS will take effect:

media_1364401751193.png

One limitation to this process is that the fields are not included in the template files. This is because the fields are stored in the database for flexibility.

If you want to style your fields, rather than simply the whole view or elements of the view, you need a different approach.

  • Go to the editing screen for your view.
  • Make sure that your Format it set to Fields.
media_1364401768488.png
  • Under the Fields area, click on any field name.
  • In the Style Settings area, you'll be able to add HTML elements and CSS classes directly to each field.
media_1364401805396.png

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: