ZCA Bootstrap 4 Template [Support Thread]

[dbltoe]

I have given up chasing my tail on this one as the results are not consistent. I have reverted to the standard bootstrap files and there is only one version of the latest jquery installed. It is occurs with all browsers.

The production server is https://bmhstoreDOTbmhDOTcomDOTau/

zc157c

Again, looking good. Especially on the accessibility. One thing often missed in ADA?WCAG checkers is the colors involved in hover. many will just reverse the colors BUT, in the case of hovering over your Categories, that's not a good idea.

If you change the hover color on .list-group-item:hover to #0074A7, you'll be compliant. May be others as well so, check those hovers.

[todoonada]

The title and input fields are out of line for the credit card data input.
Zen Cart version is 1.5.7d.
Does anyone know how to align them? The title is a label and the input field is in an iframe.

[lat9]

The title and input fields are out of line for the credit card data input.
Zen Cart version is 1.5.7d.
Does anyone know how to align them? The title is a label and the input field is in an iframe.

... not without seeing how those input fields are rendered. What payment method is in use?

[todoonada]

... not without seeing how those input fields are rendered. What payment method is in use?

Of course. I forgot to give this important piece of information.
It is the Square payment module.

[OldNGrey]

... not without seeing how those input fields are rendered. What payment method is in use?

with zc157d and standard ZCA bootstrap template on my test site the default is
Attachment 19914

[todoonada]

with zc157d and standard ZCA bootstrap template on my test site the default is
Attachment 19914

That looks quite different. You have an extra filed for date and both date fields are of the select type.
I use same zencart version like you and standard bootstrap template.
Is the code for cc-input coming from the cc-vendor? This might explain why it looks different depending on the country the shop is in.

[ChuckPhillips]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

[lat9]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Thanks, @ChuckPhilips, for filling in the missing details.

[todoonada]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Thank you. Never thought about searching this file for css.

[todoonada]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Still I got a problem to figure out how to align label and textfield.
If I want to go add a line break after the label and change /includes/languages/english/modules/payment/square.php to define('MODULE_PAYMENT_SQUARE_TEXT_CVV', 'CVV Number:<br />'.);
the line break happens after the textfield and not after the label.
Adding CSS at the end of /includes/modules/pages/checkout_payment/jscript_square.php also was not successful.

If someone knows how to get label and textfield can be aligned, this information is greatly appreciated.

Below is a comparison between the standard layout (looks fine) and bootstrap (not aligned).