Description

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

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

Comments

urbanx’s picture

urbanx commented

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

.view-viewname table { }

halver’s picture

halver commented

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.

Yeast’s picture

Yeast commented

try to use

//for table row
.view tr { }

//for table data
.view td { }

itserich’s picture

itserich commented

Thank you, I have refereced several books with no luck. Just wanted to center the header row.

In D7:

.view th {
 text-align: center;
}
RKopacz’s picture

RKopacz commented

Can someone help? I have a problem doing some basic style applications to a table created by views. It seems as though the comments / advice apply to an earlier ver of Views, because it seems that the classes have changed.Here is what Drupal spins out:

<div class="view view-board-members view-id-board_members view-display-id-page_1 view-dom-id-1">
      <div class="views-admin-links views-hide">
      <ul class="links"><li class="0 first"><a href="/maasa/?q=admin/build/views/edit/board_members&amp;destination=board#views-tab-page_1">Edit</a></li>
<li class="1"><a href="/maasa/?q=admin/build/views/export/board_members">Export</a></li>
<li class="2 last"><a href="/maasa/?q=admin/build/views/clone/board_members">Clone</a></li>
</ul>    </div>
    
     <div class="view-content">
      <table class="views-table">

(sorry, ignore the admin elements, I was logged on while doing this)

I am trying to get the table width to 90% of the containing div, but I have tried everything I can think of and nothing works.

Any help greatly appreciated.