Our Blog

Views and Panels Advanced Theming Tutorial Drupal

Each view generates lots of styles for flexibility with the CSS. A simple solution is to just go into Firebug and search for styles created and find or create them in style.css. The style names correspond to the template file names so you know what .tpl file to look for the HTML output if needed. This example we will be looking at a view I created called ‘Gurus’, for the about page section of a social networking site for yoga teachers.

 

‘About’ templates for views.
1

6
Here we created the views page Activism. I want to create a view that displays 3 trunacated RSS feeds.

This view displays feeds or if there is no feed, the body of the content item. The content type “activistm? has “body field” and “text field” for the feed url.

In the template there is simple template logic to check, “if isset() feed link” if the feed link is set, than display the RSS feeds, otherwise display any text from the node body.

All necessary information about the templates is in the link  Theme: Information
]3
Here you can see all available names for CCK-fields, display output, style output.
names of the templates used are in order of weight/hiarchy/specificity. To put it generally, the more specific the temate file name the less pages on your website will use this template, because it will be more specific to certain view.

For example, we can create a template for the field “title” for all displays in this view – this template file will be views-view-field-title.tpl.php, the top level template.

if you need to theme the title or add some code for this field specifically for the Activism page, than you must name it – views-view-field–page-2–title.tpl.php.  The name specifically targets the activism page, and you can see the activism display is numbered _2 and page-2.tpl. Specifying this name in the template (tpl) file will only target the “Activism” title field content items.

Available templates
4

Template variables
5

The template body outputting the feed or if no feed is set the default node body
5