ZCA Bootstrap 4 Template [Support Thread]

[dbltoe]

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.

[soliloqueen]

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:

[soliloqueen]

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?

[dbltoe]

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

[swguy]

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

[torvista]

Is this functionality not as included in ZC158:

[dbltoe]

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.

[swguy]

> 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.

[swguy]

> 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...ate_selection/

[dw08gm]

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?