ZCA Bootstrap 4 Template [Support Thread]

Angiex1:

g2ktcf Thank you that worked for number 2 will look at the toolkit in future as totally forgot about that.

that toolkit is even better. If you use your browser's development tools, you can find that menu/sidebox's element or div. Then using that name, you can search the css files in that toolkit and find out where the color is defined.

Will go check that out :)

In bootsrap.min.css, line 6 has a lot of data (the stylesheet is minimized). You can look for the following and adjust the items in red.```
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(255,0,0,.125);
border-radius: 0.25rem;
}

Or, a beter idea is to place ```
.card {
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(255,0,0,.125);
border-radius: 0.25rem;
}
``` in the dist-site_specific_styles.php and save the file as site_specific_styles.php.

That way, you have a record of what you did if you need it later.

For products with attributes that have swatches, it looks like radio buttons configured using

Attribute Image Layout Style (for Checkbox/Radio Buttons only)

with value
4 - Image + Option + Select as column

won't work - it produces radio buttons which are unclickable. Switching to 5 does work, and follows the normal structure I apply for pages with radio buttons in bootstrap:

a) put it in a special div

b) input first, then label.

c) On label, use class="custom-control-label"

My workaround was just to comment out existing case '4' in includes/modules/bootstrap/attributes.php, and make case '5' and case '4' the same.

I am wanting to add Fontawesome or Bootstrap Glyphs to CSS buttons (Buy Now, Reviews etc)

Links with text only as in tpl_header.php I have done the following :

<a class="nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<i class="fas fa-sign-in-alt"></i> ' . HEADER_TITLE_LOGIN; ?></a>

This is working however I want to add a Glyph to the Buy Now CSS button and want to replace the Search CSS button with a "Magnifying Glass" Glyph only

Thank you

I have answered my own question as nobody else wants to

To change the "search" button to a Fontawesome Magnifying glass

In folder: Includes/Languages/English

The File: "header.php"

Change the following:

define('HEADER_SEARCH_BUTTON','Search');

To the following:

define('HEADER_SEARCH_BUTTON','<i class="fa fa-search"></i>');

This will remove the word "search" and replace it with a Magnifying Glass only
You can still include the "search" word by using the following:

define('HEADER_SEARCH_BUTTON','<i class="fa fa-search"></i> Search');

arxvaldex:

I have answered my own question as nobody else wants to

To change the "search" button to a Fontawesome Magnifying glass

In folder: Includes/Languages/English

The File: "header.php"

Change the following:

define('HEADER_SEARCH_BUTTON','Search');

To the following:

define('HEADER_SEARCH_BUTTON','<i class="fa fa-search"></i>');

This will remove the word "search" and replace it with a Magnifying Glass only
You can still include the "search" word by using the following:

define('HEADER_SEARCH_BUTTON','<i class="fa fa-search"></i> Search');
Just make sure you've made your changes in a template-override version of that file, e.g. /includes/languages/english/MY_TEMPLATE/header.php, otherwise, your changes might be overwritten on your next Zen Cart upgrade!

ZC v1.5.7d, Clone A Template, IH 5, Edit Orders, Zen Colorbox, PHP 7.4

Would like to know how to change the Product Info page to 3 column mode when using this template.

Thanks, Ted

includes/templates/Your_Clone_Folder_Name/common/tpl_main_page.php

// the following IF statement can be duplicated/modified as needed to set additional flags
  if (in_array($current_page_base,explode(",",'product_info,document_general_info,document_product_info,product_music_info,product_free_shipping_info,shopping_cart,checkout_shipping,checkout_payment,checkout_confirmation,checkout_success')) ) {
    $flag_disable_right = true;
  }

Remove product_info from that list

For some strange reason my Footer is now placed under the center box rather than on the bottom of the page

The only changes applied to tpl_product_info_display.php
Restoring the original Bootstrap files does not fix the problem

site here:

https://arxvaldex.com/shop/

arxvaldex:

For some strange reason my Footer is now placed under the center box rather than on the bottom of the page

The only changes applied to tpl_product_info_display.php
Restoring the original Bootstrap files does not fix the problem

site here:

https://arxvaldex.com/shop/
You've somehow (?) got an unclosed <div>; see https://validator.w3.org/nu/?doc=https%3A%2F%2Farxvaldex.com%2Fshop%2F for details. That's why the footer is "off".

barco57:

includes/templates/Your_Clone_Folder_Name/common/tpl_main_page.php

// the following IF statement can be duplicated/modified as needed to set additional flags
if (in_array($current_page_base,explode(",",'product_info,document_general_info,document_product_info,product_music_info,product_free_shipping_info,shopping_cart,checkout_shipping,checkout_payment,checkout_confirmation,checkout_success')) ) {
$flag_disable_right = true;
}

> 
> Remove product_info from that list

Thank you @barco57. That works great.

Thank you!

I removed the slider indicators in "tpl_zca_banner_carousel.php" which caused the problem with the footer

Much appreciated

With zen cart 1.5.8 going to testing, will this code need updating for 1.5.8 for use with the new version of zen cart.
I was thinking of redesigning my shop using this as a starting point.

Lovely template but I cannot see where I can right-align the logo image?

Hi

I have managed to get the responsive left, center and right settings to work on the home page (they sum to 12) However when I display a product the left sidebox is fine but the right sidebox goes really wide again.

Any ideas please?

brittainmark:

With zen cart 1.5.8 going to testing, will this code need updating for 1.5.8 for use with the new version of zen cart.
I was thinking of redesigning my shop using this as a starting point.
I went most of the way to make the necessary changes, there is a branch in my Github. As usual I got sidetracked by the real world/it is not up to the minnute, but it is working with 158.

torvista:

I went most of the way to make the necessary changes, there is a branch in my Github. As usual I got sidetracked by the real world/it is not up to the minnute, but it is working with 158.
I've got changes for v3.4.0 of the template staged on its GitHub repository (https://github.com/lat9/ZCA-Bootstrap-Template/) and am testing those on both zc157 and zc158.

I don't currently have an ETA for the release.

AlgellA:

Hi

I have managed to get the responsive left, center and right settings to work on the home page (they sum to 12) However when I display a product the left sidebox is fine but the right sidebox goes really wide again.

Any ideas please?
The template is designed to hide the right sidebox when displaying a product's details.

How do you align the "buy now' button to the bottom of the card in Product Listing Page

I have tried D-Flex, Flex-Column (or Flex-Row) and mt-auto as well as CSS none of these work

I have a 4-Column center product listing with Buy Now buttons (not more info) they are not aligned and look mixed up in the cards

Thanks