An Intro to Drupal Views Templates and Theming
One 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.
Here’s how the view appears:
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.
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.
Where are those files located? In /sites/all/modules/views/theme
If you want to modify these files, copy them into your theme folder, as below:
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:
- 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.
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.
We can also make more substantive changes. For example, we can add a div to various elements of the page:
We can then add some CSS to our theme’s CSS file:
And that CSS will take effect:
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.
- 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.
Great documentation. I wonder if you’d consider putting it on [url=https://drupal.org/documentation]https://drupal.org/document…[/url] ?
Hi Ari
Yes, absolutely. Some of our tutorials have already been used on [url=http://Drupal.org]Drupal.org[/url] and we’d be happy to share this one too.
Thanks for such a detailed and helpful article. I’m trying to figure out how t create a views template for the print module. None of the templates I’m creating seem to affect the output of the module Would you know how to create a template to modify the view output?
This is killing me. I know very little about theming, and I’ve been trying to do something that I figure is pretty simple for folks who know these things.
I’ve created a page view that lists all my nodes with a specific taxonomy (the format is content and displaying teasers). I titled the view “Pictures.” when I go to [url=http://mysite.com/pictures]http://mysite.com/pictures[/url], the title is at the top of the page, left justified. I want to move it to the center, bold it, and make it a different font size.
I’ve been playing with creating a views-views–pictures.tpl.php file, and I can see where it says to print the title, but I can’t get it to change the style at all. I’ve created a .div and placed it in my CSS file, but still nothing.
Can anyone help me?
nice article.
Thanks for sharing this! I’m delighted with this information, where such important moments are captured. All the best!