align product listing headings and data?

I'm trying to modify the layout of the subcategory page ( I think that's what it's called) -- change the alignment and column widths for both the .productListing-heading and the .productingListing-data so that they align and aren't spread so far apart. I've been using my custom .css and have created new style codes, which works, sort of. Now the price appears above the item name and the ... more info line appears below. If I remove my custom tags, the whole thing gets buggy again.

Is there a better way?

Can I edit that dash out of the Qty.- column head?

And while we're at it ... is there any easy way to tell where the code on a given page is buried? Not in the URL and not in View Source. What the heck is this page called?

http://208.106.242.201/ZenCart/index.php?main_page=index&cPath=65

Thanks so much ...

I'm not entirely clear on what you're trying to accomplish. Can you post a mock-up of your desired page layout?

The '-' at the end of Qty. is defined in the admin: Configuration --> Product Listing --> Product Listing Descending Sort Order.

That page is the index_product_list page ... the easiest way to look for code is using the Developer's Tool Kit in the admin (under Tools). You can search for any code snippet in the catalog, admin or both. Be aware that generated (dynamic) code won't show in the DTK, just the underlying PHP will.

BrandTim

Thanks for the tip about the Product Descending Sort Order. Some things are not intuitive; that did it.

I had found the correct page but am unclear about how to modify layouts in php (I'm a php newbie). Normally I'd do this in a css but I can't figure out what I should be coding. I want to align the price with the item name -- there is a space between the price and the ...more info link that I suspect is being caused by the item name, but I don't know where to look for the problem.

Bottom line: I can live with it. But I'd still like to know how to modify table layouts in the catalog pages.

Thanks,
Lisa

You've got a combination of float left in the css and align center and right in the actual file.

I would take out the align calls in the template, add something to the end of each separate productListing-data for image, qty, item, and price. That way you can set the width of each and have better control over the placement of text.

Thanks very much -- sounds like what I need. I'm out of contact for a couple of days but will give it a shot at the end of the week.

Lisa

I'm stuck again. Where do I find "align calls in the template"? I'm in tpl_index_product_list.php (my custom version). I can see the calls for the data, but nothing concerning formatting.

Thanks again,
Lisa

Sorry, some folks say I "talk" too much so I was trying to cut back.:D

I tend to stay away from files to make something "look" different. The file approach, for me at least is the last place to try something. If I wanted header items included in the main area of the page, then I would need to adjust the file(s). So many folks who are unfamiliar with css and the admin run straight for the files because they're more comfortable there. I ask myself if I'm changing look or location. Most of the time, I can handle look with admin and the css.

Apparently, you've been working in both the file and the css. You have things in both that are in conflict with each other. A quick fix would be to get the css close to where it was in default. A lot has been added about productListing but the alignments for the heading and data are the biggest conflicts for now. Try changing this > .productListing-data {

font-size: 12px;
padding: 1em 1em 1em 1em;
text-align: left;
}

.productListing-heading {
font-size: 12px;
padding: 1em 1em 1em 1em;
text-align: left;
}to this> .productListing-data {
font-size: 12px;
padding: 1em 1em 1em 1em;
/text-align: left;/
}

.productListing-heading {
font-size: 12px;
padding: 1em 1em 1em 1em;
/text-align: left;/
}in your stylesheet.

Let me know if that's more like what you are looking for. Note that the items to be added are in red. This is the method for commenting out items in the css. It will let us know if you need to change the alignment calls that are "hard-coded" in the tpl file.

OK, I've commented out the "text-align: left" in the stylesheet, which centers the column headings, but now the content within the columns is out of whack.

This is becoming increasingly confusing to me as I have been trying, as you suggest, to work exclusively through the admin and the stylesheet (I'm an HTML girl and am very comfortable with .css, but I find this one very confusing at best, and it's often difficult to find which styles have been applied). I don't think that I've modified the tpl_index_product_list.php page at all.

Here's the URL: http://208.106.242.201/ZenCart/index.php?main_page=index&cPath=67

Thanks,
Lisa

It's actually a file in the includes/modules directory that controls the product listing. If you take a look at product_listing.php in that directory, you'll find where the defines are listed to control this page. Styles and classes, as you know, are css. When a php file says> (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : '');it's saying that it will add the html of width= IF the variable PRODUCTS_LIST_PRICE_WIDTH is greater than zero. Then it adds the value of PRODUCTS_LIST_PRICE_WIDTH.

What throws some off is that, in this case, the value is defined in the admin under Product Listing but some add a number in between the quotes in this file because they don't find the admin switch.

If your settings are 250 in the admin --> configuration --> product listing --> display product price/add to cart column width, try changing it to 125 (the default). If it is not then you will need to look in your file around line 41. Make sure noone hard-coded a width amount anywhere in that file and delete any you find.

Going down to the default of 125 will allow the product description to not line break as it's doing now.