ZCA Bootstrap 4 Template [Support Thread]

I know people who swear by diet Coke, but I'll take Starbucks every time!

Zen Cart 1.5.8a - PHP 7.4 Bootstrap 3.5.2

Never mind found it as soon as I posted =)

~Melanie

For others to know where to look.

There are eight different color listing for the Pagination Button colors.

Adjust as required then, make sure to download the final look in a CSV

I am lovin' that user adjustable color feature (Tools > ZCA Bootstrap Colors). Thanks for doing this, Bootstrap team.

Kudos to lat9 for the work required to allow the easy manipulation which now scores 100 across the Lighthouse test right out of the box.

soliloqueen:

Running into strange issues with responsiveness. There's only one column and it's stretched right. Doesn't matter what size the device is. Checked with responsive app & multiple browsers. I'm on 1.5.8a. I just migrated from a litespeed server to an apache one for unrelated reasons and the problem has persisted.

I'm back. This is a BONE STOCK setup:
https://arienneaudio.com/zencart/test/

Something about this seems wrong, or am I wrong? I have no idea what it's supposed to look like

First, check out Admin >> Tools >> Layout Boxes Controller. You may need to reset it to get the columns to show up.

Then, in your Admin >> Configuration >> Bootstrap Template Settings, make sure your first three items after the version number add up to twelve. The default is 3, 6, 3.

dbltoe:

First, check out Admin >> Tools >> Layout Boxes Controller. You may need to reset it to get the columns to show up.

Then, in your Admin >> Configuration >> Bootstrap Template Settings, make sure your first three items after the version number add up to twelve. The default is 3, 6, 3.

Thanks, that fixed it. I had to copy the sideboxes from responsive classic into bootstrap. apparently the sideboxes that preinstall are empty. Should have looked closer.

soliloqueen:

Thanks, that fixed it. I had to copy the sideboxes from responsive classic into bootstrap. apparently the sideboxes that preinstall are empty. Should have looked closer.
What sideboxes did you "feel the need" to copy? The 'standard' Zen Cart sideboxes for the Bootstrap template are either used from the template_default versions or an override is provided in the Bootstrap distribution itself.

Please note that the layout for responsive_classic is, at times, quite different from that used by the Bootstrap template.

Perhaps "copy the sideboxes from responsive classic" meant to set the template to Bootstrap and then go to Tools > Layout Boxes Controller and configure the same sideboxes as were used in RC? Not copying code but rather config settings.

swguy:

Perhaps "copy the sideboxes from responsive classic" meant to set the template to Bootstrap and then go to Tools > Layout Boxes Controller and configure the same sideboxes as were used in RC? Not copying code but rather config settings.
Yep. I common occurence for those not familiar with the use of the reset button. It gets bypassed right down to the bottom of the page where they are "directed" to copy the responsive_classic.

It's a matter of assuming the copy needs to be done.

The whole point of the issue was that the standard zen cart sideboxes were not working out of the box, at least for me. When I went to the sideboxes screen after a fresh install, everything was disabled, so I had to copy them using the reset command, which states:

Also, the sidebar setups for the default and responsive themes are not different:

Of course, this just means it's what I had to do to get the 3-column behavior advertised in the preview screenshot and template description, obviously there are no "objectively correct" settings for the sidebox setup. I guess the important takeaway here is that for some reason, on a fresh install, ZCA defaults to having no sideboxes enabled at all, even when the standard themes have sideboxes enabled. I am not sure why this is or if it is expected behavior, it's just what i experienced, you know?

With bootstrap not being the default template, the fact that you changed templates was the reason the layout boxes controller needed to be reset.

In fact, this exact situation can be so aggravating that some guy created a plugin to make it easier to manage:

https://www.zen-cart.com/downloads.php?do=file&id=1828

Is this functionality not as included in ZC158:

In the continuing saga of Accessibility, we (JEANDRET) have recently discovered the Site Improve Accessibility Checker. This extension is available for both Chrome and Firefox. It might be available for other browsers as well. One of the most comprehensive checkers we have found.

Its comprehenive evaluation is causing us to reevaluate bootstrap colors. Some of the other checkers are not properly vetting all the colors based on both size and whether or not they are "operational".

For example, we originally proposed the existing #007faf as the default background color and white for the text color for the catTabs menu, buttons, pagination, etc. While the colors do well for the size of the text, the newer testing states that, since these buttons perform an operation, they should have a minimum contrast ratio of 7:1 instead of 4.5:1 if it were just text. It makes sense that you would want the "Action" information as legible as posssible. The solution for this is to change all of the #007faf bootstrap color settings to #13607c for the default color. There will probably be more changes but, for now, I wanted to bring up disabled buttons as it is going to be more of a project.

In changing/testing background colors, we noticed on the test site with demo items that the "Go" buttons for Manufacturers, Music Genres, and Record Companies are disabled (due to no selection having been made in the drop-down). The bootstrap.min.css turns on an opacity setting and drops the opacity for the button to 0.65 which results in a color contrast problem by dropping the ratio to ~3.2:1 when using the new #13607c as the background. It should be 7:1 as a minimum. Incidentally, https://www.siegemedia.com/contrast-ratio is a great tool in testing this as it can assess contrast using HEX, RGBA, RGB, HSLA, etc. I have not found another tester that does this.

The good news is that, being disabled, the button is no longer considered an actionable item and does not "technically" require the 7:1 of an 'active' button. Still, 3.2:1 is not a good contrast for anything.

Also, looking at the disabled button gives not only the impression that something CAN be accomplished but, even if it's hard to read.

CSS Tricks discusses using a tooltip when hovering over the button to let the user know they need to make a selection to enable the button. This may be a solution to the contrast problem but not for the "why doesn't this go button work" problem. In addition, the Send Now button should be considered for this treatment IF there is an entry in admin >> Email >> Set "Contact Us" Email Dropdown List

Another way of dealing with this is to add colors to the .btn.disabled, .btn:disabled call in the CSS. Making the background- and border-colors the same as the text color for the button will result in the button "disappearing" until a selection is made by the customer. This is what we are using temporarily by utilizing the site_specific_styles.php for the color additions. Again, background and text only match when the button is disabled, the ADA/WCAG checkers may recognize the odd contrast but, if they do, they report something like "Disabled elements do not require sufficient contrast."

In using the ZCA Bootstrap Colors, The "Button Text Color" could be "Button Text/Disabled Color" since that color would be used for the button color AND the new button background- and border-color settings under .btn.disabled, .btn:disabled.

test1DOTjeandretDOTcom shows the buttons with the background- and button-colors set to match the active button's text color. You can view the original "look" by disabling the two colors when inspecting the buttons.

Comments on this are appreciated.

Is this functionality not as included in ZC158:

Not exactly. I believe the built in capability only populates the dropdown with templates that already exist under includes/templates. So the built-in utility is not as powerful in an upgrade situation, where the old template might not have been copied to the new install.

I guess the important takeaway here is that for some reason, on a fresh install, ZCA defaults to having no sideboxes enabled at all, even when the standard themes have sideboxes enabled.

It's really up to the template author whether to install sideboxes by default; Bootstrap starts clean so you don't have to delete anything.

To clarify that the next step after template switching is sidebox selection, I added a sentence to that effect to the template selection FAQ:

https://docs.zen-cart.com/user/admin_pages/tools/template_selection/

dbltoe:

In the continuing saga of Accessibility...

Incidentally, https://www.siegemedia.com/contrast-ratio is a great tool in testing this as it can assess contrast using HEX, RGBA, RGB, HSLA, etc. I have not found another tester that does this.

Just out of interest, did you undertake their course?