Themeing Table_View for Custom Store Specials Block

Posts: 29
Joined: 08/08/2007
Uber Donor

Thanks in advance for any help with this.

This post may belong in a "Themeing Druapl Views" forum over at the Drupal site; but i thought i would post it here because others may be dealing with the same issue.

Plus, it involves a handy solution, that i'd like to share with everyone, for easily allowing non-technical "storekeeper" type folks that you might be setting up a site for, to easily add and remove products from a list of Store "Specials" or "Favorites" on the home page.

Here it goes:
I've made a custom block using the views module with 3 fields, all filtered by a taxonomy term called "Specials" (This is the handy solution part that allows "storekeepers" to simply add or remove the taxonomy term "Specials" from an individual product's taxonomy to make the product appear and disappear from the block on the front page. See work in progress at www.theperfumed-dragon.com (This may not be a groundbreaking idea; but nubes like myself may not be aware that this is possible.)

This is all working great; but i'm having trouble themeing the table created by the block view using css. I'm able to change some things using:

/*This css works for those of you just glancing*/

.view-Specials {
     color:#FF0000;
     etc.
     }

But the gray (BG-COLOR:#333) table itself is being "themed" from the system.css with labels that include TABLE, BODY, TR.odd, TR.odd TD, etc. And changing ANY of these will effect ALL tables. I only want to effect one table at a time. In layman's terms, i'm looking for something like this:

/*This css DOES NOT WORK for those of you just glancing*/

.view-Specials tr.even, tr.odd {
     background-color: #fff;
     border-bottom: 1px solid #ccc;
     padding: 0.1em 0.6em;
     etc.
     }

Any suggestions for themeing individual block tables created with the views module?

Thanks very much,
Scott

Posts: 130
Joined: 08/14/2007
Uber DonorBug FinderEarly adopter... addicted to alphas.Cool profile pic award.Internationalizationizer

That shouldn't be too hard. Do you have a link to your site? If not, you should paste the html source (just that block) into the forums so I can have a look at it Smiling

Best regards,
Thomas

Posts: 29
Joined: 08/08/2007
Uber Donor

Thanks for the reply Thomas. Here is a link to this site: www.theperfumed-dragon.com

You'll see two blocks on the right, both generated by views module. I'm currently using block-views-Specials.tpl.php and block-views-Favorites.tpl.php method to place a unique image above each. I'm hoping to use either "css" or "block-tpl.php" method for styling each of them a bit differently. Especially all of the table characteristics.

Thanks again,
Scott

Posts: 2086
Joined: 08/07/2007
AdministratoreLiTe!

The normal block.tpl.php file has an id on a div that specifies the entire block. If your table only appears there, you can use that id as part of your css rule.

Posts: 29
Joined: 08/08/2007
Uber Donor

Thanks Lyle
I follow you; but don't know css structure well enough to get there. Firebug is telling me the DIV id name is "view-Specials" and I'm able to use this is to style the color easily enough; but i'm not sure how to combine this with tr.even and tr.odd elements? I tried ".view-Specials tr.even, view-Specials tr.odd"; but it didn't work.

Or should I make a new style file with the same name as the block.tpl.php file I want to style? Lyle. I'm a poet, you know it.

Could you explain this a little further? If you need more info, please see "Specials" block, right sidebar, on homepage of live site www.theperfumed-dragon.com

I'm happy to buy you lunch Lyle if you can help me get to the bottom of this.
Thanks very much,
Scott

P.S. here is what Firebug is telling me the HTML for the Specials block is:

<div id="block-views-Specials" class="block block-views">

<!--scott do not show title
<h2 class="title">Specials!</h2>-->

<!--scott show "specials" image as the block title-->
<div align="center"><img src="/files/specials-block-title.jpg"/></div>
   
    <div class="content"><div class="view view-Specials"><div class="view-content view-content-Specials"><table>
<thead><tr><th class="view-cell-header view-field-node-data-field-image-cache-field-image-cache-fid"/><th class="view-cell-header view-field-uc-products-model"/><th class="view-cell-header view-field-uc-products-sell-price"/> </tr></thead>
<tbody>
<tr class="odd"><td class="view-field view-field-node-data-field-image-cache-field-image-cache-fid"><div class="field-item"><a href="/node/22"><img title="" alt="" src="http://www.theperfumed-dragon.com/files/imagecache/cart/files/04160039.jpg"/></a></div></td><td class="view-field view-field-uc-products-model">Castile (liquid) Soap</td><td class="view-field view-field-uc-products-sell-price">$8.50</td> </tr>
</tbody></table>
</div></div>
</div>
   
</div>

Posts: 2086
Joined: 08/07/2007
AdministratoreLiTe!

Might have been a typo from the copy/paste, but you need a dot before the second view-Specials in your selector. Between Firebug and Web Developer to edit your CSS, I was able to change the style of the Specials block like this:

.view-Specials tr.odd, .view-Specials tr.even {
  background-color: #ffffff;
}

Posts: 29
Joined: 08/08/2007
Uber Donor

It was the dot. Back to css school for me. I just donated $20 bucks to ubercart in hopes you will use it to have lunch on me.
Thanks Lyle.
Sc0tt