Need help with center column for product listing

I'm very new to Zencart, but I've been able to use the information here to get a template set up on my local machine. There are a couple of things I would like to change, but so far my digging around hasn't helped, hence a new post here.

Here's a short list of some of the things I'm trying to do:

(1) I've found the places in admin where you change the width of the left and right columns, but what about the center column? I haven't been able to locate anything for changing the width of the middle column. I need that to be wider to accomodate both the product images and text description. Right now the center column shows up as 3 "sub-columns", one for the image, one for the text description and one for the price. The latter two are so narrow that the boxes become much taller in order to accomodate the text. This is only a problem when I'm listing things in the main categories or subcategories. If you click on an individual product, everything displays nicely.

(2) Is there a way to set the default weight to ounces rather than pounds? I couldn't find an easy way to do that. My products are small things, typically measure in 2-4 oz. lots so a different frame of reference would be helpful.

(3) Right now when I click on a subcategory, only two products are listed. This means to see all the products in that group, you have to click the next button a LOT. Is there a way to set up the middle column so you display a specified number of things? I'd rather scroll up and down the page to view stuff than have to click a forward and back arrow repeatedly.

1. You can set the overall width of the page in the stylesheet.css file. That effectively determines the width of the center column.

2. Look at this tutorial. https://www.zen-cart.com/tutorials/index.php?article=204. You will have to be careful about how Zen calculates shipping charges.

3. admin >> configuration >> maximum values >> Products Listing- Number Per Page

The Zen Cart default is to show 10 products per page of listings. How did you get two per page? If your template has that, it might be hard-coded. A link to see your site may give some insight into the actual situation and allow accurate advice.

Thanks for the responses. I've fixed #2. Regarding #1, I've looked through stylesheet.css and wasn't able to find any lines relating to the page width. What line of code would I need to add to change the width?

Regarding #3, I see in admin that it was set to a default of 10 per page, so yes, this template probably was hard coded as you said. Right now I'm testing everything on my local system (ie laptop) before I upload it to my website....otherwise I'd be happy to share the link.
What exactly does it mean when you say that the template is hard-coded in that way? If the template was set 2 per page, why not just change the default from 10 to 2? I wonder if perhaps I shouls junk the template and go back to the default template.

Update: I tried switching back to the standard template that comes with Zencart and interestingly it is also set for 10 products per page, yet I see only two per page.

Update: (1) I tried switching back to the standard template that comes with Zencart and interestingly it is also set for 10 products per page, yet I see only two per page. I've also noticed that when I change back to the template I downloaded, sometimes I see one product per page in some places.

update:
(2) I looked for tutorials on changing the pagewidth and some said just to change #mainwrapper to 100% or to a certain# of pixels. Another tutorial said to change width settings in several places:
https://www.zen-cart.com/tutorials/index.php?article=45
I couldn't find any of those particular search terms ie ".centershop"

Here's a screenshot of the middle of the page to show why I wanted to change the overall width. The 2nd and 3rd columns get squished quite a bit. I'd like to improve the way this looks, but as you guys can see, I've had trouble getting the page size to change. I can change sizes of just about everything else, but of course not of the thing I actually need to change :huh:

Usually, the width of the Zen Cart display is set by adjusting #mainWrapper. (the turorial you link to is for a previous version of Zen Cart)

Hard to give specific advice without being able to see the site about the template you are using. The column width issue seems as much as anything to be to do with the size of the image being used in the product listing.

Have a look in :

configuration >> images

and you will be able to adjust that.

Also, consider a mod called flexible product listing which allows you a bit more flexibility in the layout of product listing.

So with mainWrapper, if I set width to 100%, then the width of the zencart page should change size as I adjust the browser size? I tried making this change and the thing still ends up the same size. I even tried specifying the number of pixles instead, and still the thing is fixed at the same size as it has always been.

Where on the download page would I find the addon thing you spoke about? I've tried and search and did some digging on zen-cart and haven't managed to find anything that fits the description yet.

Use \includes\templates\YOURTEMPLATE\css\stylesheet.css and set #navBreadCrumb, and .centerColumn to the width you want for your center column. The #mainWrapper width specifies the overall width (left-sidebox, center, right-sidebox) for your store.

Don't feel bad about not finding .centershop; it's not in a 1.38a stylesheet!

lat9:

Use \includes\templates\YOURTEMPLATE\css\stylesheet.css and set #navBreadCrumb, and .centerColumn to the width you want for your center column. The #mainWrapper width specifies the overall width (left-sidebox, center, right-sidebox) for your store.

Don't feel bad about not finding .centershop; it's not in a 1.38a stylesheet!

oh bleep, those two things aren't in the stylesheet either! Are they supposed to be there, or was I supposed to add that stuff?

There's no point to setting widths for the center elements mentioned without adjusting the overall page width; and if you change the page width, the center elements will automatically change accordingly making separate specifications unnecessary.

Any selector not already in the stylesheet can simply be added to it.

Some information about the template you are using may be helpful, like its name and where you got it.

here's the thing. The layout of Zen Cart in that section is governed by a table. It has three columns. The left and right column widths are set in admin. The centre column is not.

The table itself is 100% of the width of #mainWrapper in the default install.

So, the best way, IMHO, to set the width of the centre column is to set the width of the left and right columns and then set the width of the #mainWrapper.

Swap back to the default template and you can see this at work.

If the template you are using has modified elements so that this does not work (which basically means that it has set absolute widths for other elements ) then it is hard to give you better advice without being able to see the template.

A further bit of advice would be to use firefox as a browser and install the web developer toolbar which will give you the ability to click on an element (Ctrl Shft F) and be told its ID and Class and lots of other information.

Some templates (coughTemplateMonstercough) have given their own class/id names to almost every element, so even if they are styling the exact same element as the standard template, the standard name will be useless.

gjh42:

Some templates (coughTemplateMonstercough) have given their own class/id names to almost every element, so even if they are styling the exact same element as the standard template, the standard name will be useless.

Yeah, mabe that's part of the problem. I tried to install their free template. Maybe that was a bad move. Would I be better off going back to the classic one and just modifying that?

Update: when I went back to the classic template, I was able to set the middle column the way I wanted by using previous comments about setting #mainwrapper toa fixed number. In the other template (monstercrap) it wouldn't work...but now it's ok

Dear lat9, gjh42 and other Layout experts:

I am using a fully working TemplateMonster Template.

My site is http://digulu.x10hosting.com/store/index.php?main_page=index&cPath=1_4
I also have same issue.
TemplateMonster has 3 stylesheet files

\includes\templates\TM001\css\stylesheet.css
\includes\templates\TM001\css\stylesheet_main.css
\includes\templates\TM001\css\stylesheet_tm.css

So I went to each stylesheet and here is what I noticed.
In the stylesheet.css
Both navBreadCrumb and .centerColumn not found.

Found only
#mainWrapper {
text-align: left;
vertical-align: top;
}

In the stylesheet_main.css

mainwrapper not found

I found only
#navBreadCrumb {padding:10px 0px 0px 0px; color:#ffffff; font-weight:bold; margin-bottom:2px;}
.centerColumn {}
.centerColumn table {}

In the stylesheet_tm.css
Both centerColumn, navBreadCrumb and mainWrapper are not found

I want need is Move price and quantity side by side in product listing in the center column. (center box where product listing page in the center). So I followed instruction from
http://www.zen-cart.com/forum/search.php?searchid=12924151

But the center column is too narraw for the addcart box to line up side by side.
Help..!
:frusty:

Just to clarify:
Yes. I understand if I reduce "Column Width - Left Boxes" and "Column Width - Left" from the Admin -> Configuration -> Layout Settings. I could give some space to my center column. (I don't know why) but this mean my Left boxes is more narrawed.
So I don't want this..I just want want overall or center column/box extentions.

Somone help me..

Thank you.

Find in your stylesheet_tm.css (line 11)

.main_t{width:962px; margin:auto; text-align:left;}

Change 962 to 1000.

Even though it's not good practice to spread the basic styling rules over three stylesheets the way TM does, it is good that those selectors are each only in one stylesheet. If the same selector was in two stylesheets, you might make an edit to one and wonder why it wasn't working, when the other one was really controlling it.

gjh42:

That worked!. How did you know that? how did you do that? :blink:
From now, I am worshiping you my friend..

Thank you very much.