Centerbox on main page

I have been struggling with the centerbox on my index page.

What I would like to do is have a center box similar in look to the "Featured Products" box but have it list my Parent Categories instead (quanity 10).

I have seen a few threads where they say to "clone" the "Featured Products" box but the instructions were not clear enough for me.

If that is too complicated, I would be just as happy to list my Categories on my main page but the problem is when I do that, they just list them in ONE singular column down the page. I would like three categories wide but don't know how.

Any help would be greatly appreciated.
Thank you in advance,
Mike
https://www.millwrightmasters.com/store

I would be just as happy to list my Categories on my main page but the problem is when I do that, they just list them in ONE singular column down the page. I would like three categories wide but don't know how.

Try the Product Grid Layout from the downloads section.

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=77

Tina

Thank you for the quick response.

I already have that installed for my Product Listings Page. It works pretty nice. I didn't know that I could use it for my index page as well.

Any thoughts on how I'd make that work on Index page with Categories?

Thanks again,
Mike

That won't work for categories.

Set it in admin > Configuration > Maximum Values > Categories To List Per Row.
(Three is the default - not sure who/why changed that to one in your shop.)

Thank you,

The default was 3 which aligned all of my categories to the left. I changed it to 1 and that centered my categories listings to the center. That's fine but it listed them in one single column down the center.

I would like to have them 3 wide.

Any ideas?

The setting of three per row was not what made them align left - something else, possibly a stylesheet setting, did that.

You have ```
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: center;
}

is an invalid property - it can be left, right or none.
You do have```
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}
```which will make the contents of .categoryListBoxContents center in its own width - which now is 100%.
Can you set it back to three so we can see the effect?

Glenn,

Thank you for pointing out my invalid code. That WAS the problem with my left-aligned categories.

Now I DO have three columns wide on my index page.

Would you happen to know which code I would alter to vertically align them now?

Once again,
Thank you for the help
Mike

By "vertically align", do you mean with the bottoms aligned? There is not a way to make divs in a row match in height without specifying the exact height.

They don't want to behave when given vertical-align: bottom;, even with the addition of display: inline; so it is necessary to give more extensive instructions:```
.categoryListBoxContents {
text-align: center;
height: 120px;
position: relative;
}
.categoryListBoxContents a {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}

Glenn,
That was great!....I appreciate the help.

If I could ask just one more thing please and it's pretty elementary I would guess.

I have added boxed borders around the categories for neatness but cannot get a space between them ( a small gap on the sides).

I don't really get the difference between padding and margins in this script stuff.

Thanks a ton,
Mike

How did you get your categories in the center box?

mmnord:

I have been struggling with the centerbox on my index page.

What I would like to do is have a center box similar in look to the "Featured Products" box but have it list my Parent Categories instead (quanity 10).

I have seen a few threads where they say to "clone" the "Featured Products" box but the instructions were not clear enough for me.

If that is too complicated, I would be just as happy to list my Categories on my main page but the problem is when I do that, they just list them in ONE singular column down the page. I would like three categories wide but don't know how.

Any help would be greatly appreciated.
Thank you in advance,
Mike
https://www.millwrightmasters.com/store

Mike,
I see you have figured out the margins to get spacing on the category boxes.

Sped,
The categories are not in a "centerbox"; they are the normal categories display with some styling applied.