Drupal: Views Styles and Theming: How to Redefine HTML Output
This is the next article devoted to Views module. Earlier we created Views block that shows the last site news. And now we are going to learn how to change its style and/or theme it. You can apply the below instructions for all available views (attachment, block, feed, gallery page, page, etc.)
Views Styles
Views allows to set style for the content. To do so, please perform the following steps:
- Open Administer > Site building > Views and select the required view.
- Within Basic settings, click Style: Unformatted:
- Scroll down the page and select style for your view:
Every style has its settings. So if you wish to set style options, click settings link.
Note: if you wish to leave the default style for the view, select Unformatted.
- Click Update.
Views Themes
Views handles querying the database and organizing the information for display. It creates the output display by converting retrieved data into variables and passing them through a series of templates. Each template handles a different "level" of output creation. The number of templates used to create a view’s output depends on the view’s type and style, as well as the number of fields involved. These templates exist as files (with a .tpl.php extension), in either the module’s or the theme’s directory, and follow PHPTemplate’s theming conventions.
Generally speaking, the template levels are:
|
Field: |
When fields are used in the view ("Row style" = Fields), each field can be themed with a field specific template file. If "Row style" = Node, the node’s .tpl.php file is used. |
|
Row: |
Controls how the individual fields are assembled together into a row. This template isn’t used for table styles |
|
Style: |
Controls how the rows are assembled into the output. For example, in a list view a foreach loop places each row entry into the list entry (<li>) of an unordered list (<ul>). |
|
Display: |
Controls the other information making up the view such as title, header and footer. |
Each theming level has a default template file. The default templates are located in the theme directory of the Views module. e.g., /root/sites/all/modules/views/theme. These files can provide both a starting point and an example for customization, though their general nature sometimes makes them less useful than one would hope.
The theme information link on the Views interface shows views theme file information. Each display has slightly different theming information, so make sure the correct display is selected.
Clicking the link produces a display pane (shown below). It shows, in bold, the template file used at each level and provides a list of template file names that will override the default templates.
When you’re ready to theme your view, click the theme information link and decide on the appropriate template file name to use. Generally you’ll be theming a particular display of a particular view and will select one of the more specific names, if not the most specific name.
Once you’ve identified the appropriate level to theme, copy the default template file from the modules/views/theme directory to your theme directory and rename it to your chosen name.
Pressing the Rescan button in the Information section will refresh the cached information and confirm the file you just copied and renamed has been detected by Views.
You can now modify the template file to your required specifications.
In addition to the recognizing the theme directory as a template file location, Views will also recognize template files in a subdirectory named "views". Placing your views template files in a views subdirectory aids file organization if you have a lot of theme files.
Enjoy!
thanks man. helped me grasp the theme for views