Theming Drupal Views in a Zen Subtheme

Take complete control of design and flow of information using Drupal Views and Zen Subthemes. Changing the appearance is crucial when changing a background and body text colors of a site that conflict with the default views styling. CSS properties can be added to a high level tag that affects many areas as well as to very finite areas of just one View.

When the views module outputs a view it wraps it in a div tag with class information. Zen uses views-styles.css in the CSS directory of your subtheme to style views.

One key element in styling views is that when a view is created you must use on lowercase letters and underscores, however when creating the class tag in the CSS document you must use hyphens in place of underscores.

- Style all Views content with '.views-content { }'

- To style all table views use '.view-content table { }' with necessary style information

- When you want to style a particular View's table, simply add '-view-name' after '.view-content' which would appear as '.view-content-view-name { }'

Hiding Node Fields in Views

When using the Node row style in views all elements of the node are visible. This can turn ugly, especially when taxonomy terms are displayed on each summary. You can use views-styles.css to hide any field types for all or specific views.

Hiding taxonomy terms in views can be done by adding the class ".views .taxonomy {}" to the style sheet then using the visibility: hidden & height: 0px attributes. I was more specific and added the following classes...

  • .view-tracker .taxonomy
    • Tracker is a view packaged with the views module which can be used to show all new activity on the system
  • .view-taxonomy-term .taxonomy
    • This view creates a page with nodes tagged with the selected taxonomy term, also a default view.

Try2Stop.Us | Contact Us | Log In | Try2Stop.Us © 2011