Views gives you options of the way your output will be structured, such as a list, a table, and a grid. Whatever the structure, you are free to style the output. In this recipe we will style output structured as a grid.
Getting ready
We're going to use clone the view in the Theming a field recipe, and create a new display for it.
We'll create a table that classifies nodes by content type.
If you have not tried that recipe yet, perform the Getting ready section and steps 1-12 from it at this point.
How to do it...
On the view list page, navigate to the views list (admin/structure/views), click the downarrow next to the edit view name/description button and select Clone, change
View name to Themed links 2, and click the Continue button. Create a new view display with the following steps:
1. Click /themed_links in the Page Settings section, change the path to themed-links-2, and click the Apply button.
2. Click the +Add button in the Displays section at the top and select Page as the display type.
3. Click the Page link next to Display name and enter Grid Page as the new name, then click the Apply button.
4. Click the Themed links link next to Title, select This page (override), change the title to Themed grid, and click the Apply (this display) button.
5. Click No path is set next to Path in the Page Settings section, enter themed-grid as the path, and click the Apply button.
6. Click the link for Content: Nid in the Fields section, select This page (override) from the select box, then click the Remove button.
7. Click the link for Content: Path in the Fields section, select This page (override) from the select box, then click the Remove button.
8. Click the link for Content: Type in the Fields section, select This page (override) from the select box, check the checkbox for Output machine name, and click the Apply (this display) button.
9. Click the Unformatted list link next to Format: in the Format section, select This page (override) from the select box, click the Grid radio button, and the Apply (this display) button.
10. In the Grid Page: Style options window, enter content-type-[type] in Row class, change the Number of columns to 3, then click the Apply (this display) button. 11. Click the Advanced link, click the Information link next to Theme in the Other
section, and copy the right-most file name from the Style output line, views-view- grid--themed-links-2--page-1.tpl.php, then click the OK button.
12. Click the Save button.
Create the template with the following steps:
1. From the Views module theme directory (probably sites/all/modules/views/ theme or sites/all/modules/contrib/views/theme), copy the file views- view-grid.tpl.php and save it into the directory of the theme you're using (sites/all/themes/recipes, if you are using the recipe theme) that contains
template files, naming it views-view-grid--themed-links-2—page-1.tpl. php.
2. Clear your caches (admin/config/development/performance). 3. Edit this new file and look around line 26 for:
<?php print $item; ?>
4. Immediately prior to this line add the following:
<?php print $row_number * 3 + $column_number; ?> 5. Save the file.
6. Edit the CSS file for your theme. In my case it's called style.css and is in the css folder of the theme.
7. Add the following lines to the end of the file:
td.content-type-article {background-color: #ffc0ff} td.content-type-blog-entry {background-color: #c0c0ff} td.content-type-country {background-color: #c0ffc0} td.content-type-course {background-color: #ffffc0} td.content-type-department {background-color: #ffc0c0} td.content-type-destination {background-color: #ffedc1} td.content-type-employee {background-color: #c1ffdb} td.content-type-extension {background-color: #dcc1ff} td.content-type-gallery {background-color: #dcc472} td.content-type-home {background-color: #cadc72} td.content-type-ingredient {background-color: #eebabb} td.content-type-product {background-color: #dff6f7}
8. Save the file and navigate to themed-grid to see the following output:
How it works...
This Views display selects all published nodes, and shows the title and content type of each as a grid cell.
We used a replacement tag [type] as part of the class name for the cell, so that cells can be themed by their content type. We chose to have the Type field output as the content type machine name. This field's value is used in the class name for the grid cell. Had we not output
the content type as a machine name, such as real-estate-flier, it would have been put
in the HTML as real estate flier, which would result in invalid mark-up. In conjunction with the class name, we added entries to the CSS file that provide a different background color for
cells of each content type.
We also created a local copy of the grid template file and edited it to insert a cell number at
the top of each cell.