Theming in Views

Theming in Views

The Views module is a critical part of most Drupal websites. Whether you are reformatting homepages or providing users with the ability to organize data, it has become one of the most used modules in existence. As it has become so ubitiquous, theming views is essential. And theming views is particularly important as the release of Drupal 8 nears, which will include Views in Drupal core.

Views makes it very easy to style content. Some of this styling is directly in the Views UI, though it also directs you to the template files to edit if the UI itself is insufficient.

Theming using the Views UI

Many places exist where you can add CSS automatically using the Views UI. In the ‘Advanced’ panel, you can add a CSS class to the entire view. While this feature is helpful, adding a class to a general view often does not provide a deep enough scope.

When you choose a format for your view, there are various applicable styling options. By accessing the ‘Settings’ for a given format, these options are displayed. Depending on which format you are currently using, you can add classes to specific parts of the view (e.g. rows) and allow for zebra striping.

The real power of the UI CSS additions is in the field configuration. If, under the ‘Format’ section in the options, you show ‘Fields,’ this configuration opens the door to styling each individual field. Every field you include has a ‘Style Settings’ tab in its options that allows you to customize the field or label HTML. This customization allows you to wrap these in default HTML elements (div, h1, span, etc.) and create a CSS class for them.

This ability also allows you to make various fields of your view to mimic the style of other parts of your page. The feature to create wrapper HTML around both the field and the label can be particularly helpful for those who want to include the label and manipulate it in relation to field HTML.

Views Template Files

The Views UI is easily customizable. If you are still not satisfied, you may refer again to the ‘Advanced’ panel. Right under ‘CSS class,’ you will find ‘Theme: Information’ and when you click on ‘Information,’ a window pops up with lists of template files.

Each list of files is applicable to a major part of the view and increases in specificity as it progresses. Views will bold the template files it is using, so before you create any new template files, notice the first bolded file in the list. It is using the default files stored within the module.

The first list is labeled ‘Display output’. This list contains everything about the view, including headers, footers, pagers. You can modify these to suit your needs; adding wrapper HTML with classes where necessary.

The ‘Style output’ is the second list and is specific to the chosen format. For example, if you are using a grid format, the style output will be using ‘views-view-grid.tpl.php’. You may modify the content displayed like the title and surrounding code by creating a relevant template file for this section.

‘Row style output’ defines the display inside the row, or item, of the view. If you are displaying fields, a list for each field will be shown to enable you to modify that code.

These lists show you which files to create in your preferred degree of specificity. You can modify a particular view or a larger group of views depending on which template file you create. This use of template files provides you with ultimate control over the look of your view.

If you want to see how displays work for views, you may click on the name of the bulleted list and see the current template file code to start with when creating your own file. For future reference, you can also find the default files in the sites/all/modules/views/theme directory. In these files, all of the variables available will be displayed along with a general idea of what you should include in your templates.

If you would like to minimize the number of template files in your theme, you may want to consider instead using theme hooks. You may use the name of the template file when creating the corollary theme hook function. Simply replace dashes with underscores and prefix your theme to the name. For example, if you were using the default Bartik theme and created a view with the title ‘articles,’ you might find yourself wanting to create the file ‘views-view--articles.tpl.php’. The function equivalent to put in the template.php file would be named ‘bartik_views_view__articles()’. Notice that both dashes between ‘view’ and ‘article’ are included as underscores. Using theme hooks will make it easy to have complete control over the design of your views.