styling/layout improvements for v300

[drbyte]

Banners

• [x] banners in tpl_main_page et al are not centered. Should we add text-center to all of them (eg: forced opinionated style) or add a CSS entry just for banners? I'm inclined to just do it inline: <div class="bannerSix rounded text-center">

Category Description (see first image)

• [x] There's no containing element for "just the category description" (perhaps also with its title and image). While this is nice on mobile (where sideboxes are gone), it can irritate the eye on desktop.
• [x] There's no padding between the category-description and the filter dropdowns for mfg/alpha. These probably should be in their own containing div.

Product Listing issues (see 2nd image) (affects index/cats/prod-new-all-featured-specials)

• [x] pagination - selected. Noting that this (and the following) were displayed properly prior to the zc157a merge.
• [x] paginator - alignment
• [x] column-headings in row-based product-listing (inclined to remove product-image heading, maybe all headings except when sortable)
• [x] padding, esp for prices, in row-based product-listing (see 3rd image, vertical)
• [x] padding below product-listing, above centerboxes (see 4th image)

Sideboxes (5th image)

• [x] categories sidebox - padding on category separator for selected category

@barco57 do you have some insights on best approaches for some of these?

---

1

---

2

---

3

---

4

---

5

[lat9]

Re: Category Description. The image is present in '#indexProductList-categoryImage' and the description in '#indexProductList-content'. Do those need additional styling?

I could add a <div class="p-2"></div> if the category description is present.

[lat9]

For image 4, there's a setting that I'm not finding that displays the listing even if there's only one product. Where the heck is that?

[drbyte]

For image 4, there's a setting that I'm not finding that displays the listing even if there's only one product. Where the heck is that?

I believe you mean Admin->Configuration->Layout Settings->Skip 1-prod Categories (I would argue that it makes more sense under Product Listing, but that's outside the scope of this template.)

[drbyte]

Re: Category Description. The image is present in '#indexProductList-categoryImage' and the description in '#indexProductList-content'. Do those need additional styling?

I'm undecided. @barco57 ?

I could add a <div class="p-2"></div> if the category description is present.

It would be nice if it could be done without having two conditional checks, eg one for opening div and one for closing div. But that may not be an option if the title/image need to be inside the div.

I'm slightly more inclined to merely (or at the very least) add an unstyled div around it, so that if someone wanted to add a border or apply a background color, etc, at least they can target that specific segment directly via css without having to find the right template file to edit.

[lat9]

That change just pushed corrects the display for image-4 (product listing, no space). Essentially, modifying the zca_split_pages_result class to return   when there's only one product.

[lat9]

Products listing, removing "Product Image" heading. For rows, use the associated text-{whatever} class (was causing a non-HTML5 align= attribute to be added). Additional elements added to the stylesheet for padding and to add a margin above the bottom navigation.

[lat9]

That commit corrects the layout for the split-page-results (also some refactoring for readability).

[lat9]

The category-related elements on a product-listing is now wrapped via #indexProductList-cat-wrap, enabling that/those elements to be containerized.

[lat9]

Added a margin below that newly-added element.

[lat9]

For item 1 (banner centering), each of the 'main-section' banners (1, 3, 4 and 6) now have a zca-banner class and are, by default (via the stylesheet) centered. Site-specific styling can target a specific banner group, e.g. .bannerSix to override the alignment.

[lat9]

... and there's the final one, correcting categories sidebox display when a category with sub-categories is the currently-selected category.