Views: Styling output
This chapter describes how to control the appearance of the content accumulations created using the Views module.
Table of contents
Drupal projects discussed in this chapter: Views.
Introduction
The Views module let the site designer create and present accumulated lists of contents. This chapter is about styling the appearance of those lists.
Using built-in functions
Views have some built-in functions to style the output. For instance, you can specify what strings to use for titles, add a prefix and a suffix to a field, define a header and a footer for a view, and how to display (or not) fileds that have no result. You can also alter the appearance of a field by rewriting the result, using replacement tokens. These functions are more or less self-explanatory and will not be discussed further in this chapter.
Using template overrides
If the built-in functions are not sufficient, there is a general mechanism for overriding default display templates that can also be used to create customised views.
The
display template override mechanism discussed below is not part of the
Views module. Template overrides are part of Drupal's general
theming framework, and will be discussed in more detail in the
chapter about subtheming.
The override mechanism is however very useful when we want custom
styling of particular views.
To override templates, you first need to know what templates is currently used, and what you are allowed to call the replacements. To find, out this, expand the third column (“Advanced”) in the view editor, and click on the link to theme “Information”. This will show a modal popup a list of template files, in the following order:
- Display output: This controls the structure of the overall view, including the position of and code around the view administrative links, header, exposed filters, pager, “more” link, footer and feed icon. This template also controls the position of and code around the primary view content, empty content, and attached views.
- Style output: This controls the structure of this particular view display's style, e.g. HTML List, Table, Unformatted, etc. This includes the view title and the code surrounding each row (item in your view) of the given style.
- Row style output: This controls the internal structure of each row (item in your view), including the label and the content for each field.
- Fields: Unless your row style is set to Node, there will be one entry for each field in your display, allowing you to control the structure and code for each. (If your row style is set to Node, there will not be any field entries, and the view will use the node's template file instead.)
Each list is ordered roughly from the least specific to the most specific. The active template for each – which is the most specific template found on the system – is highlighted in bold.
For instance, for our “blogpages” view, the list of templates for the User: Name field may in the Page display may initially look like this:
Field User: Name (ID: name): views-view-field.tpl.php, views-view-field--name.tpl.php, views-view-field--blogpages.tpl.php, views-view-field--blogpages--name.tpl.php, views-view-field--page.tpl.php, views-view-field--page--name.tpl.php, views-view-field--blogpages--page.tpl.php, views-view-field--blogpages--page--name.tpl.php, views-view-field--page-1.tpl.php, views-view-field--page-1--name.tpl.php, views-view-field--blogpages--page-1.tpl.php, views-view-field--blogpages--page-1--name.tpl.php
Here, the first entry (views-view-field.tpl.php) is
shown in boldface and is the active template. This is a generic
template. The generic templates are located in the theme
subdirectory of the root directory of the Views
project. The rest does not exist (yet).
To override this, you first need to review the list of potential
overrides, and decide on what level you want the override to take
place. If you want to override the styling of all name
fields, then you should create an override file named
views-view-field--name.tpl.php. If you want to be
specific, and restrict this to names appearing on the blogpages
view, you pick
views-view-field--blogpages--name.tpl.php, and so on.
Let us say you opt for the latter. In that case you must first
make a copy of the current active template
(views-view-field.tpl.php), and name this copy
views-view-field--blogpages--name.tpl.php in the
templates directory of your'site's subtheme. You must
press Rescan template files (located in the theme
“Information” modal popup) to make Drupal look for template overrides.
If everything went well, the override file you created should now be
boldfaced, as shown in the example below.
Field User: Name (ID: name): views-view-field.tpl.php, views-view-field--name.tpl.php, views-view-field--blogpages.tpl.php, views-view-field--blogpages--name.tpl.php, views-view-field--page.tpl.php, views-view-field--page--name.tpl.php, views-view-field--blogpages--page.tpl.php, views-view-field--blogpages--page--name.tpl.php, views-view-field--page-1.tpl.php, views-view-field--page-1--name.tpl.php, views-view-field--blogpages--page-1.tpl.php, views-view-field--blogpages--page-1--name.tpl.php
After you verifyed that Drupal is able to locate your template override file, you can go ahead and edit this copy and incorporate any changes you want to incorporate in the template. For instance, you could change:
<?php print $output; ?>
to:
<strong><?php print $output; ?></strong>
This override would display that particular field in boldface.
The
template overrides listed in the theme “Information” modal popup are
for various elements of the view. They cannot be used to override the
page template for a view. For this, you provide need to provide a
template that uses the path to the view page as part of the
template name. E.g. if the path is /myview, the template
file should be named page--myview.tpl.php. This one of
the default template suggestions, so no pre-process function is
required.
It
is generally not considered good Drupal style to make modifications to
parts of the site that you did not create yourself. The main reason
for this is that this may (depending upon how you update) wipe out
your modifications whenever you update your system. But even if you
make sure this does not happen, it is difficult to keep track of
customisation files that lives among core and contributed files. If
you want to use default template overrides and you are not using a
theme you created yourself, the Drupal way of doing things is to
create a sub-theme to your active theme, and place your overrides in
the sub-theme.
For
simple overrides, the above is what you to need to know. For more extensive overrides, see
the following external resource:
Views 2 Theming,
Views Online Help,
Using CSS with Views, and
Using Views Templates.
Final word
[TBA]
Last update: 2018-10-22 [gh].