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.
