Add CSS Classes for Table Columns

I've modified /modules/product_listing.php to include CSS classes that identify the column order in the table. This allows you to address columns from your stylesheet to create interesting effects that would be impossible otherwise.

Here's what the HTML source looks like after the mod:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabTable">
  <tr class="productListing-rowheading">
   <th class="productListing-heading col1">Product Image</th>
   <th class="productListing-heading col2">Item Name-</th>
   <th class="productListing-heading col3">Price</th>
  </tr>
  <tr class="productListing-odd">
   <td class="productListing-data col1" align="center"></td>
   <td class="productListing-data col2"></td>
   <td class="productListing-data col3" align="right"></td>
  </tr>
</table>

Since the code changes are very minimal (two lines in this file), I thought it might be worthwhile to add to the next release. It would help reduce the need for template overrides, in my opinion. Of course, there are other modules/templates that could use this change.

I've attached a diff to this post.

What do you think?

Looks like an elegant way to add flexibility. So you could still style all productListing-heading or productListing-data without referencing col#, or style an individual productListing-heading col# { ... } if you wished, correct?

I'd like to know too. I've implemented the mod and I do like how it's broken up the table;

productListing-heading col1
productListing-heading col2
productListing-heading col3

productListing-data col1
productListing-data col2
productListing-data col3

:yes: I like the straight forwardness of this, as it has been difficult to tweak these specific components.

or style an individual productListing-heading col# { ... } if you wished, correct?

:no: I've tried by calling the individual columns like this via css but unfortunately it doesn't seem to do anything at my end.

I've tried, e.g.;

productListing-heading col1 {
}

.productListing-heading col1 {
}

td, productListing-heading col1 {
}

td, .productListing-heading col1 {
}

The only way that i can tweak the look is still bound by the original calls;

.productListing-heading {
}

.productListing-data {
}

:blink: Is there another coding tweak along the chain that needs to be done in order for the css to recognise these individual col1/2/3's? or maybe i've been trying to call them through the css wrong?

I'm keen to see this suggestion reviewed as i can see how it could help with adding flexibility to tweaking the look of the product listing.

I'm afraid my first post misled you. I sloppily didn't completely translate my statement into CSS format. You would use ```php
.productListing-data .col1 {
}

Each part is a class. You could refer to .col1 alone if you wanted to.
Let me know how that works.

Here's how things went :wink2: If i use;

.col1 {
text-align: left;
}

This will affect the alignment of both the productListing-heading & productListing-data cells in column 1 to align to the left at the same time. [i can see how this will be great for many users out there]

Regretably, the ammended CSS call shown below still has no affect:

.productListing-data .col1 { 
}  

I've tried playing with text alignment, float & adding a border in between the { } - no effect on the display for this specific cell. Here's an example of an entry in the stylesheet;

.productListing-data .col2 {
   text-align: left;
   }  

Got a little experimental and had no luck trying it this way either;

.col2 .productListing-data  {
   text-align: left;
   } 

:blink:

I wonder...
Did you put the experimental statements toward the top or the bottom of your stylesheet? If there is another .productListing-data { } after yours, it would override your experiments. There is guaranteed not to be another .col1 { } there, so that would have no impediments to working.

The changes were made towards the bottom of the sheet. I did a text-search to find other instances of productListing, found one which i removed, though still no luck with trying to make the calls through this method even with all other instances of productListing disabled.

.productListing-data .col1 {
}

However this on it's own still does work;
.col1 {
}

I've been tweaking the Sage template. It does seem like there's an overide in there somewhere for these things - maybe it isn't named as productListing or perhaps it's at a deeper level via admin or within the PHP somewhere. I'll keep searching nevertheless. Thanks for your help :wink2:

For easier reference, here is the relevant information:

The modifications go in /includes/modules/your_template/product_listing.php.

(around line 67)

  $list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="productListing-heading"',
                                      'text' => $lc_text );
}

add
col' . ($col + 1) . '
as shown:

  $list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="productListing-heading col' . ($col + 1) . '"', //  dweingart mod
                                      'text' => $lc_text );
}

and (around line 170)

      $list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="productListing-data"',
                                              'text'  => $lc_text);
    }

add
col' . ($col + 1) . '
as shown:

      $list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="productListing-data col' . ($col + 1) . '"', //  dweingart mod
                                              'text'  => $lc_text);
    }

(Accurate as of v1.3.5.)

Having learned more of the details of how CSS works since the beginning of this thread :lamo: I thought it would be a good idea to post accurate info on how to use the classes described above.

First, since .productListing-data and .col1 are called in the same place in the program, there is no way to address them as a unit in the stylesheet, as far as I know.

.productListing-data .col1 { } 

implies that .col1 is a descendant of .productListing-data (called inside the structure that calls .productListing-data). It isn't, so that declaration will be ignored.

You can define in your stylesheet properties of .productListing-data that affect the whole row, and then define one of those properties in .col1 so that column only will be affected.

For the time being, .col1 will only apply to one situation; but you might want to style tabular info differently in different places on your site. Here is where the descendant selector comes in. Use the id of the page element involved to specify which .col1 you mean to affect:

#productListing .col1 { }

This is also effective in spacing and positioning the product image, which has admin settings that translate to inline HTML styling and override .col1 alone.

Actually the productListing-heading and productListing-data class are both obsolete here.

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabTable">
  <tr class="productListing-rowheading">
   <th class="productListing-heading col1">Product Image</th>
   <th class="productListing-heading col2">Item Name-</th>
   <th class="productListing-heading col3">Price</th>
  </tr>
  <tr class="productListing-odd">
   <td class="productListing-data col1" align="center"></td>
   <td class="productListing-data col2"></td>
   <td class="productListing-data col3" align="right"></td>
  </tr>
</table>

Using descendant selectors you can apply any style to the column 2 (for example) header using:

productListing-rowheading .col2 {}

Or to any header cell:

productListing-rowheading th {}

And any style to the column 2 data cells using:

productListing-odd col2, productListing-even col2{}

Or to any data cell:

productListing-odd td, productListing-even td{}

And if the table itself would have and appropiate class or id then even productListing-rowheading would probably (we don't style rows anyway, do we?) become obsolete. Then the th/td combined with the colx classes (and odd even classes if needed) would be sufficient to apply any style you want.

Hmm... looking at the generated HTML instead of the PHP where .colx is created, you're right.

That really brings the code suggestion of this thread to a point of removing the superfluous styles from the code to streamline things, and replacing them with the .colx-generating code. So proposing

$list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="col' . ($col + 1) . '"', //  dweingart mod
                                      'text' => $lc_text );
}

and

$list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="col' . ($col + 1) . '"', //  dweingart mod
                                              'text'  => $lc_text);
    }

instead of the previous snippets.

Thank you for sharing :)

Hope you've been well Glenn ;)

This is not a specific/direct reponse to the above issue though it does counter the key problem i've been having with Zen Cart, especially when dealing with issues in this thread - working out what the specific formal 'names' are to the CSS definitions, classes & IDs in order for me to tweak design & layout issues.

The Chrispederick web developer extension for firefox.
http://chrispederick.com/work/webdeveloper/

It's been the closest WYSIWYG (babelfish) tool to help me understand how PHP & CSS codes are visually represented on the screen. It's been the ultimate missing link I've been waiting for so long. A fantastic option to edit CSS on the fly - saving me from the arduous task of "save & refresh" in trying to work out what CSS call effects what.

It's been fantastic because there's an option to show ALL the specific "tweakable" CSS calls and many other great elements/structures too. More power in being able to change & tweak specific elements from the root, when too many elements tend to be grouped together into 'one' on the CSS files of the free templates.

Don't care if it's been recommended before, it's worth recommending again! I only had "aardvark" before - and this tool beats it by a longshot. Only just discovered it about a week ago. A fantastic tool for designers that lack the PHP coding skills, it's helped me to interpret & decipher the code a lot. Hope it helps others ;)

Progress of shopfront design has been going well for me, i'm thrilled that the journey is nearing towards completion. For the newbies struggling, especially the experienced designers that have lost the WYSIWYG interface of their former work with html editors due to PHP - hang in there, it does get better ;)

Wishing a happy & prosperous new year for all!

I've added the second set of snipets, for some reason i already had the first set added into the stylesheet yet i hadn't added these before?

I'm wondering how i can now customise the columns once these references have been added in.

Posts 9 & 10 describe some of the ways to use the new classes.

In your stylesheet, declare the things you want to style, like

#rpoductListing .col2 {
width: 150px;
color: green;
}

etc.

Very cool. And I propose we do away with the table/TD and use DIVs....

I was looking at https://www.tigerdirect.ca and liked the product layout... but that means physically changing the files... where if ZC used CSS and templates, we could use positioning to allow moving of thhe content around in each product area......

What are the thoughts on this?

So this was my first venture into the core of ZenCart with the goal of moding it to do my bidding. I don't have a diff yet, but I have mostly achieved my goal. The site is slow.. way to slow, and no idea why, but thats tomorrows problem.

It looks to really make the product list DIV instead of TR/TD there is some tweaks to be done in the template, and some additional CSS as well. I also went a step further with the class definition as described above with this.

                                      'params' => 'class="productListing-heading col' . ($col+1) .' '. $column_list[$col] .'"',

basically I can do the following then which really gives me power!

.PRODUCT_LIST_MANUFACTURER:before {
  content: "Manufacturer:  "
}


.PRODUCT_LIST_PRICE {
  color: #DF0000;  
	font-size: 125%;
  text-align: left;  
}

Without touching a line of the templates I can add text to a field, I can change the colour of a specific element, in this case I wanted the price to stand out and be red.

I hope to make the module file more granular... so more "div" items will show that I can then control. I have to say I'm no where near a CSS export, but I do like what I can do with it!

Another neat trick you can do with CSS control things based on specific content... like....

table.gen tbody td a[href="http://www.zen-cart.com/"] {
	margin: 0 auto;
	display: block;
	width: 15px;
	height: 15px;
	background: transparent url(http://www.zen-cart.com/zencartlogo.gif) no-repeat;
	text-indent: -999em;
	border-bottom: 0
}

Something like that says, if a TD field shows up, instead of showing the text, insert an image instead.... what we can do with CSS is just amazing! means less hacking of core code to make design changes which is fantastic!

Okay time to stop rambling, hope this was useful to someone.

Instead of cross posting, I've placed my post under templates. If you want to see how I did the addition of product named columns and moved the actual placement around take a look at this modification, inspired by this thread actually. Hope my suggested change makes it into a future release of ZC.

http://www.zen-cart.com/forum/showthread.php?t=56395

how do add more space between rows?

link
http://memorylast.com/cart/index.php?main_page=index&cPath=87

memorylast - Please do not post the same question in multiple threads.

sorry, but can you teach me how do I creat a thread/post a message