More control on layouts only by CSS Stylesheet?

[steveroot]

I've searched the forum here for a while and can't find an answer to this (or a contributed module) so I thought I'd ask the question. If I used the wrong words please direct me to the answer :-)

Now, I love CSS. I want to layout every detail of my site using CSS but I'm finding it a little tough. For example: In the product listing zen outputs the following html:

<tr  class="productListing-odd">
   <td class="productListing-data" align="center"><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040"><img src="images/noimg.JPG" alt="Full Height Base Units" title=" Full Height Base Units " width="100" height="80" class="listingProductImage" /></a></td>
   <td class="productListing-data"><h3 class="itemTitle"><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040">Full Height Base Units</a></h3><div class="listingDescription">Full Height Base Units available in different sizes.</div></td>
   <td class="productListing-data" align="right"><br /><br /><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040">... more info</a><br /><br /></td>
  </tr>

What I really want is more classes/spans/divs in there by default. For example:

<span class="listingprodid1040">
<tr  class="productListing-odd">
   <td class="productListing-data" align="center"><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040"><img src="images/noimg.JPG" alt="Full Height Base Units" title=" Full Height Base Units " width="100" height="80" class="listingProductImage" /></a></td>
   <td class="productListing-data"><h3 class="itemTitle"><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040">Full Height Base Units</a></h3><div class="listingDescription">Full Height Base Units available in different sizes.</div></td>
   <td class="productListing-data" align="right"><br /><br /><a href="http://www.mysite.co.uk/index.php?main_page=document_general_info&amp;cPath=10&amp;products_id=1040">... more info</a><br /><br /></td>
  </tr>
</span>

Simply adding a style over the whole row with (for example) the product ID built automatically into the class name means I can always make certain products look certain ways - even though they share the same core features zen cart provides (like write a review, displaying the image and so on). This could also be applied to other things as well, for example, the product type.

So, to do this I can quite easily go and rewrite the PHP that generates the product listing and add the tags I want BUT I'd rather not go rewriting scripts if it's already been done and I just haven't found the zen way.

Further, if it hasn't been done, is it something that others would fine useful? In which case perhaps someone can point me the write way to contributing my alterations back?

Many Thanks
Steve
http://www.kinsbury.co.uk

[Kim]

Adding the span does what that you can't already do with the existing tags?

[steveroot]

(appologies for the long absense)

Adding the span does what that you can't already do with the existing tags?

Yes, in my case I need to change the look of a particular product, in the example code above, product id 1040, so I could perhaps put a border around just this item using some CSS like:

.listingproductid1040 {
    border-style:thin;
    border-color:black;
    border-type:solid;
}

Using the CSS, I could do other neat things like call in a "sale price" graphic or change the background colour of just this section.

Setting a style to a specific product ID is not likely to be within the needs of the majority, but setting a style by product type may well be. For example, giving the option of style "product - general" different to "document - general" may be useful for others. I'm still new to Zen, but perhaps it could be a simple as introducing a <span> for every attribute applied to an item? Then if someone creates a new attribute they will get a style they can use across the whole item?

Anyway, before I start hacking the code and destroy my easy upgrade path, is there a CSS solution already out there and if not, would anyone be interested in me posting my code changes as I go for future reference?