Product display spacing

I need to add more white space between product listings (for example, when all the products in a specific category are shown). I also want to add a blank line after the 'Displaying 1 to n (of n products)' phrase. I've spent a couple of hours now trying to find the source for this formatting. I know how to add padding or blank lines, just can't figure out where to do it. Thanks for any help.

well... I think this depends on how altered is your template, but if it stills works in a default zencart way ( sorry my english ), it's possible that you could get around in admin->configuration->All Listing

If you check you'll see this for every field you want to display

0= off
1st digit Left or Right
2nd and 3rd digit Sort Order
4th digit number of breaks after

About the "Displaying 1 to n (of n products)" ... if you use you browser inspector (press F12) and check if this class is around : navSplitPagesResult
and give it a margin. ie:

.navSplitPagesResult {
margin-bottom: 1em;
}

Or whatver class is around that display info ...

Thank you, that indeed fixed the problem with 'Displaying...'

But admin > configuration > all listing unfortunately lets you control every product aspect except the one I need to change. So I'm still looking for that one.

then maybe you can get around with css also.
I've change things in my template, but if you use the inspector try to see what class surrounds those listings
ie:

And add some margins too.

You can then also apply that css to a page specific css file. See the readme in the folder includes/templates/template_default/css

Yes, I had already found the variable and modified its parameters, before I ever asked here. Didn't make any difference. But perhaps I need to do it in more than one place. I'll keep looking.

if you provide a link to the page and are specific about what you want done, i'm sure someone could tell you the specific css file and line number to modify..... if so desired....

you can change things in more detail. Depending if you are using a customized template or not, they are located at:

includes/modules/YOUR_TEMPLATE/product_listings.php

And also check the featured, special, new listings

includes/templates/YOUR_TEMPLATE/templates/tpl_modules_products_new_listing.php

If they are not there, then check the template_default, and copy them to your template.

I'm using the classic template, with minimal changes to stylesheets and headers.

includes/modules/YOUR_TEMPLATE/product_listings.php is clearly the right file, thank you. I haven't yet figured out where to change it, but at least I know I'm in the right place now. I'm capable with a variety of programming languages but php came on the scene after I retired from the business, so I'm having to learn it as I need it.

EDIT--the page under consideration is at http://www.darwinhills.com/test. I'm working right now with the Spices category, but the same formatting change should affect the other product pages as well. If anyone can point me in the direction of the code to change, it would save me much needed time. Thanks in advance.

I' still not sure what space you want , but looking at the spices categories, assuming that you are referring to the product list table, you could:

td.productListing-data {
padding-top: 1rem;
}

..1rem or whatever space you need...top, bottom, left, right.

The product listings, are more or less equal all over the place.

And not sure if you know, but there are some free templates... specially from PicaFlor , that are mobile ready.... or even the new responsive template for zencart 155.
Those would give you quite a start. Then you can altered the colors, etc...

......I'm not saying that your's is not nice , just passing the information.

Yes, I'm sure that would take care of it. I just don't see where to put it. I want to add an extra line or two at the bottom of each product listing to separate them a bit more on the page. I know html, but if you're talking about product_listings.php, I don't see where to add a "padding-bottom" parameter. Sorry, I'm usually quicker to pick things up, but php is completely new to me. The logic is fairly obvious, but the syntax is taking some time to figure out.

mesnitu:

And not sure if you know, but there are some free templates... specially from PicaFlor , that are mobile ready.... or even the new responsive template for zencart 155.
Those would give you quite a start. Then you can altered the colors, etc...

......I'm not saying that your's is not nice , just passing the information.

I looked at those and decided against them. I'm happy with the colors I chose--they're the same ones as on the existing working site. I didn't want a huge difference in appearance, just the added features of ZenCart that I don't have with my existing software. The existing site is at https://www.newnaturalsonline.com. It works just fine but doesn't give me most of the options that ZenCart does, such as integration with Stamps.com, the ability to set up an account, adding variable attributes to products, and so on.

Right
Well..all this are options but in different places for different needs....

If that's the only thing you need ( give a extra space between the rows) , then you could add that last code I've posted to your stylesheet.css and you don't need to do nothing in the php files.

If you check with the browser inspector ( press F12 ), you'll see that zencart has css classes and ID's for almost everything.

So there are a lot of changes that one can make only in the css file, without "messing" with the php files.

But let's suppose in your product listings, you want the title to have a <h4>title</h4> or add some other stuff.... well, that's when you have to dive into the code.

So , check your browser inspector. He will give you the classes, ID, and on what line they are in your stylesheet.css file.

HeleneWallis:

I looked at those and decided against them. I'm happy with the colors I chose--they're the same ones as on the existing working site. I didn't want a huge difference in appearance, just the added features of ZenCart that I don't have with my existing software.

Well, not trying to influence you. But looking at the new zc155 responsive template and the current online shop, you'd have to change some background colors, etc, the same way you are doing it now.
The advantage, is that is mobile friendly, and this days, it counts, and there is a support forum for it.

http://www.kobrawd.com/demo155/

Anyway, it's just a suggestion.

Best regards

mesnitu:

Right
Well..all this are options but in different places for different needs....

If that's the only thing you need ( give a extra space between the rows) , then you could add that last code I've posted to your stylesheet.css and you don't need to do nothing in the php files.

If you check with the browser inspector ( press F12 ), you'll see that zencart has css classes and ID's for almost everything.

So there are a lot of changes that one can make only in the css file, without "messing" with the php files.

But let's suppose in your product listings, you want the title to have a <h4>title</h4> or add some other stuff.... well, that's when you have to dive into the code.

So , check your browser inspector. He will give you the classes, ID, and on what line they are in your stylesheet.css file.

Yes, I use the browser inspector all the time. That's how I found the other places I needed to change, along with some help from the Developer Tools in ZenCart. Thanks, I'll try changing the stylesheet. I didn't think that would be sufficient.

Welp, that worked very well, thank you. It also changed the text alignment to left instead of center, but I fixed that by adding "text-align: center' to the same variable. Interesting... But it's doing what I wanted now, and I feel more confident about changing other aspects of the formatting too. I didn't realize just how much I could change this way.

Your help has been much appreciated.

Okay, I've been lurking again:P but I have a few thoughts. I'll address what's been discussed here and maybe a couple of other things. Got a little free time today.
Space on a website is a very valuable commodity. Many times, adding a small space radically changes what shows "above the fold" on a site. That's what the customer sees on their screen when they come to the page. True, there are times when you don't want the customer to stray as on the product listing page. If you use the F12 for your product listing page, you'll find some calls for tr class="productListing-even" and one for odd. Simply adding a background color to either the odd or the even will quickly let the customer know what encompasses the information for that product. This will really help when your customer is using a mobile device.
It's nit-picking at best, but using 1rem for padding is setting up a possibility for other things to take over. First of all, rem (I bet some of you other lurkers thought it should have been em) is based on the font-size of the root (or body). It will work but, if you decide you want the body to go from 10 to 12, your spacing will grow along with the font. It's better to stay with px or % with widths and heights as it's less likely to surprise you later. It will work with line-spacing as that should be based on font.
Now, I AM going to try to influence you as much as possible on responsive templates.
First of all, using the classic green means that your next upgrade will cost you nearly the same amount of time as your first installation. Without a valiant effort on your part, your next upgrade will wipe out all your hard work. And, yes, all your little changes will be harder to find than they are now. Again, check out information on template overrides. At least they will still be around after an upgrade.
Responsive Templates - Any time spent today in developing a non-responsive template is costing you up to three times in total development. First of all, any time spent developing out of responsive is wasted almost completely. Anyone with a mobile device will head right back to their Google search for another site to go to when they see your site on their device. They just don't want to waste their time trying to find what they want on their screen. And, yes, your add to cart is not visible on a portrait phone without scrolling.
Now, let's take a look at the demo that mesnitu gave us above. A quick glance through the demo let's me know that most of the little quirks in the responsive_classic template have been tweaked. That's great! It gives a more accurate look at what the responsive_classic template can do. It does help us to see one of the problems we found with the template. For this demo, we'll use the one provided by mesnitu - http://www.kobrawd.com/demo155/
Using this demo and a Chrome addon to check mobile compatibility, we see, as stated, that those tweaks have been done and it looks great on all devices.
BUT, what happens if we want to change colors? Inspect (F12) the site and look for <div id="navCatTabsWrapper">. When you highlight that div, you will see on the right side of the inspection screen that the div is controlled by line 34 of stylesheet_colors.css. So, we can just change that to your favorite color, right?
Well, not quite.:(
If you look at what is controlled by the colors in line 34 you'll find not only the Wrapper but a product-listing color, a hover, and a couple of buttons:ohmy: So, if I want to change the Wrapper color, all sorts of things start to happen. That can be life-changing if you're not up-to-snuff on CSS and stylesheets. It doesn't mean that what was done was incorrect. I just think they went one step too far in consolidating the stylesheet. Getting all the colors together was a great idea.
A Solution - We have submitted an add-on/modification containing stylesheets that "fix" the color change difficulties and add the "tweaks" as seen in the demo above. We've taken all but the most basic color calls out of other stylesheets, added them to the stylesheet_colors.css and broken up the stylesheet_colors.css by item. What this means is that you can pick as little as three colors for your site and have your site colored and mobile friendly in a matter of minutes. You can see an example of this at http://netzencommerce.com. If you inspect the navCatTabsWrapper there, you'll see that the background is a single call in the stylesheet. In your case, changing the #6699cc to your color would have it quickly looking like your site. The other thing you will notice is that we added a more modern way of doing colors. Adding an opacity to a color allows you to lighten or darken it as you see fit. Most browser can use this but the hex color is still there if they can't.
The addon has been submitted to the Plugins area but is not yet released. You can download it from the site.
Last for this diatribe:smartalec:
Organic Ceylon Cinnamon - A customer can order this item without ever having to select a weight. You'll get an order, ship it, and the customer will say, "But, I wanted the 8 oz. pack." They may have thought they made a selection for 8 but only hovered over it an proceeded to the Add to Cart. Adding a value of "Please Select a Weight" as the first option in weight let's them know that they need to select a weight. AND, making it the default and for display only means they will get a warning if the DON"T pick a weight.

End of short reply :rotflmao::rolleyes:

Thanks, all taken into consideration. My issue right now is having to get the new site up and running as fast as possible, and without a huge change in appearance from the existing site. I have a lot of repeat customers, and I don't want them having to fumble around trying to find the items that they regularly buy. And from my own personal reaction to 'brand new and updated' websites, I also don't like it when a favorite supplier suddenly changes its appearance and no longer looks like the site I always liked.

I do have a very detailed list of the changes I've made so far. Not very many, actually. But every one of them is thoroughly documented, and they're grouped by which file was changed. So if I have to go back to redo anything, or make additional changes to any given file, I can easily go straight to the pertinent part of the documentation. I was a maintenance programmer for years, so I know what it's like to work on a system with zero documentation. No fun.

Thanks especially for the warning about option selection. I never even thought of that.