Theming table views generated by the views.module using your style sheet (CSS)

Last modified: August 23, 2009 - 15:33

Description

The following snippets illustrate how to theme the table views output from the views.module using your style sheet.

When the views.module outputs a table view, it wraps the table in a DIV which has a class using the following naming convention:

<div class='view-content view-content-viewname'><table>

Where viewname is the unique identifier of the view or the name you gave the view in the Basic Information options. Click on ADMINISTER -> VIEWS to see a list of your Existing Views. The unique identifier or viewname is in the first column.

Method 1 of 2 - theming all table views using your style sheet.

The snippet below, illustrates how to theme a specific table view. Paste this into your style sheet in your theme folder and change the viewname to suit.

.view-content table{ width:90%; background-color: red; border:3px; padding: 6px;}

Method 2 of 2 - Theme a specific table view using your style sheet (.CSS)

The snippet below, illustrates how to theme a specific table view. Paste this into your style sheet in your theme folder and change the viewname to suit.

.view-content-viewname table{ width:90%; background-color: red; border:3px; padding: 6px;}

Notes

for this to work to me, i

urbanx - February 6, 2009 - 22:19

for this to work for me in drupal 6, i needed to reference it as:

.view-viewname table { }

FYI: I'm just familiar enough

halver - March 28, 2009 - 19:35

FYI: I'm just familiar enough with CSS, etc. to really mess things up.
I inserted your code from the first example in my stylesheet. It changed the header of the table generated by the Views module to red, but not the rest of the table. Any idea what I am doing wrong?
Thanks so much for your help.

Changing table content

Yeast - June 14, 2009 - 16:57

try to use

//for table row
.view tr { }

//for table data
.view td { }

 
 

Drupal is a registered trademark of Dries Buytaert.