ZCA Bootstrap 4 Template [Support Thread]

[g2ktcf]

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.

[Angiex1]

Will go check that out :)

[dbltoe]

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

[swguy]

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.

[arxvaldex]

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

[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');

[lat9]

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!

[Ted Grapler]

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

[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

[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/