Blog/ Basic Views Theming

While building a large website on Drupal, you will come across a large number of views which would require customization to provide users with additional information and match the required design. At times, there is a need to wrap the view into your own divs, add your own classes around the field output, add additional information above or below the view, or even change the structure of view output.

You can change the complete structure of view output and remove the default Drupal classes as well. There are several ways of theming. You can:

• Modify the template files
• Use the Drupal Views UI to theme your view
• Or create your own template files specific to your view

Modify the template files:

1. Go to your module folder. It should be your root_directory/sites/all/modules/views/theme
2. You can copy all the ".tpl.php" files and paste them into your theme directory (sites/all/themes/mytheme/). Modify accordingly. Do not forget to clear the cache after copying the files.

Drupal will now use the views template files from your theme directory rather than using it from the default module directory.

Use the Drupal Views UI to theme your view:

Using the Drupal Views UI, you can add your own classes to the view.

Kindly note that you can add multiple classes separated by spaces.

Style Settings for fields

1. Go to "Structure" -> "Views" -> "Edit your view"
2. Click on the corresponding field.
3. Add your own custom class. You can even change the HTML element.

View Header and Footer

You can add your divs in the header and footer.

1. Click on "Add" under the "HEADER" section.
2. Select "Global: Text area" and click on "Apply".
3. You can add full html and PHP code here.

Create your own template files specific to your view:

Even if you have modified the global view template files, you can also create a template file for a particular view:

1. Edit your view and click on "Theme: Information".
2. Here, you will find a list of all possible template files for your view. The active template file is highlighted in bold. Create a file (in your theme directory) with any of these suggestions.
3. Now click on the corresponding style output such as "Display Output", "Style Output", etc and copy the code into the file just created.
4. Then click Ok. You will notice that your newly created file name is highlighted in bold. Drupal will ignore the default template file and will read your template file.

   

5. Modify your template file accordingly.