ZCA Bootstrap 4 Template [Support Thread]

Cindy,

On my laptop, shrinking the browser window to about 2/3 the screen width causes the problem on your site. I estimate the problem starts at about 666 pixels based on a 9.25 inch browser window, 72 screen pixels per inch, on a 13 inch wide screen. See attached image. MacPro 15 inch (diagonal) laptop, 2014 vintage, Firefox browser (v85.0).

In version 3.0.0, on a product info page, two thin lines remain if "larger image" is clicked and then the larger image is closed. The lines are borders associated with the modal header and footer. The modal-header border bottom is set to 1 px. Similarly, the modal-footer border top is set to 1 pixel. I eliminated these lines through CSS, but some people may want to keep the lines when the large image is displayed.

Dave

Dave224:

Cindy,

On my laptop, shrinking the browser window to about 2/3 the screen width causes the problem on your site. I estimate the problem starts at about 666 pixels based on a 9.25 inch browser window, 72 screen pixels per inch, on a 13 inch wide screen. See attached image. MacPro 15 inch (diagonal) laptop, 2014 vintage, Firefox browser (v85.0).
Yep, I see that too. There's a point where the width is close to the 992px transition point where those inputs don't display real well (as identified by your screenshot). I'm currently considering that a corner-case since there aren't many customers that will be doing a screen-shrink.

lat9:

Dave224:

Cindy,

On my laptop, shrinking the browser window to about 2/3 the screen width causes the problem on your site. I estimate the problem starts at about 666 pixels based on a 9.25 inch browser window, 72 screen pixels per inch, on a 13 inch wide screen. See attached image. MacPro 15 inch (diagonal) laptop, 2014 vintage, Firefox browser (v85.0).
Yep, I see that too. There's a point where the width is close to the 992px transition point where those inputs don't display real well (as identified by your screenshot). I'm currently considering that a corner-case since there aren't many customers that will be doing a screen-shrink.

A couple additional options:

• In 3.0.0 of the template if you know your customers are going to be using strangely-sized browser windows and also will have no clue how to resize their browser to see things better, then you could just change the number of columns from 3 to 2.

• The 3.1.0 version of the template does some fancier auto-placement and resizing of cells based on viewport, and you can edit the applied classes directly in the template's HTML if your needs require slightly wider (and fewer) cells at various breakpoints.

Hello, I have tried editing the stylesheet colours and can't seem to change the add to cart green colour in the header and border, I have changed it in the stylesheet and searched for the colour code in developers toolkit, I change where it pointed and it's still green :/ Any ideas?

Also, is there a way to remove the 'important links' link that isn't used from showing on the mobile version, I have it switched off on desktop version but it's appearing still on the mobile version.

Thank you lots.

Opal5:

Hello, I have tried editing the stylesheet colours and can't seem to change the add to cart green colour in the header and border, I have changed it in the stylesheet and searched for the colour code in developers toolkit, I change where it pointed and it's still green :/ Any ideas?

Also, is there a way to remove the 'important links' link that isn't used from showing on the mobile version, I have it switched off on desktop version but it's appearing still on the mobile version.

Thank you lots.
That add-to-cart coloring is controlled by the stylesheet_colors.css file. I'm not sure why @rbarbour chose to keep that in the stylesheet rather than controlled by the admin color-picker.

lat9:

That add-to-cart coloring is controlled by the stylesheet_colors.css file. I'm not sure why @rbarbour chose to keep that in the stylesheet rather than controlled by the admin color-picker.

Right? Should have been incorporated into the admin color-picker. I'm using the beta version and it resizes the pages nicely...

lat9:

That add-to-cart coloring is controlled by the stylesheet_colors.css file. I'm not sure why @rbarbour chose to keep that in the stylesheet rather than controlled by the admin color-picker.

Thank you! I think it was an issue my end because I'd changed it in stylesheet_colors but it was still green, it took a while to refresh and update on my desktop so could be a cache issue my end maybe?

Would you happen to know how I can remove the 'important links' link from the mobile version? It's still in the mobile menu at the top but turned off in admin and off on the desktop version but for some reason it's still showing on the mobile version :/

Opal5:

Thank you! I think it was an issue my end because I'd changed it in stylesheet_colors but it was still green, it took a while to refresh and update on my desktop so could be a cache issue my end maybe?

Would you happen to know how I can remove the 'important links' link from the mobile version? It's still in the mobile menu at the top but turned off in admin and off on the desktop version but for some reason it's still showing on the mobile version :/
The mobile-menu's display is controlled by /includes/templates/bootstrap/common/tpl_offcanvas_menu.php.

The inclusion of that "Important Links" link (for EZ-Pages) is controlled by Configuration :: EZ Pages Settings :: EZ-Pages Display Status - Sidebox; set that to a value other than 1 to disable the display to the "general public".

lat9:

The mobile-menu's display is controlled by /includes/templates/bootstrap/common/tpl_offcanvas_menu.php.

The inclusion of that "Important Links" link (for EZ-Pages) is controlled by Configuration :: EZ Pages Settings :: EZ-Pages Display Status - Sidebox; set that to a value other than 1 to disable the display to the "general public".

Again, thank you so very much! That worked perfectly and I still got to keep my ez pages on the footer :) The 'Information' link at the top menu on the mobile site, where is that controlled? I have it turned off in Layout Boxes Controller because I'm using the information in the ez pages in the footer instead.

Opal5:

Again, thank you so very much! That worked perfectly and I still got to keep my ez pages on the footer :) The 'Information' link at the top menu on the mobile site, where is that controlled? I have it turned off in Layout Boxes Controller because I'm using the information in the ez pages in the footer instead.
That will currently require manual edits to /includes/templates/bootstrap/common/tpl_offcanvas_menu.php to remove those information sidebox links.

lat9:

That will currently require manual edits to /includes/templates/bootstrap/common/tpl_offcanvas_menu.php to remove those information sidebox links.

Thank you, I've found the file but can't see what to edit without messing up, do I remove the chunk off text? or add something? I'm not too great at manually editing, only simple stuff lol

I can see this chunk of code which I think refers to that information link in the mobile menu:

<li class="nav-item dropdown d-lg-none">
        <a class="nav-link dropdown-toggle" href="#" id="infoDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php echo BOX_HEADING_INFORMATION; ?>
        </a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
<?php
        echo '<ul class="m-0 p-0">';
if (DEFINE_SHIPPINGINFO_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_SHIPPING) . '">'. BOX_INFORMATION_SHIPPING.'</a></li>';
}
if (DEFINE_PRIVACY_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_PRIVACY) . '">'. BOX_INFORMATION_PRIVACY.'</a></li>';
}
if (DEFINE_CONDITIONS_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_CONDITIONS) . '">'. BOX_INFORMATION_CONDITIONS.'</a></li>';
}
if (!empty($external_bb_url) && !empty($external_bb_text)) { // forum/bb link
        echo '<li><a class="dropdown-item" href="' . $external_bb_url . '" rel="noopener" target="_blank">' . $external_bb_text . '</a></li>';
}
if (DEFINE_SITE_MAP_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_SITE_MAP) . '">'. BOX_INFORMATION_SITE_MAP.'</a></li>';
}
  if (defined('MODULE_ORDER_TOTAL_GV_STATUS') && MODULE_ORDER_TOTAL_GV_STATUS == 'true') {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_GV_FAQ) . '">'. BOX_INFORMATION_GV.'</a></li>';
}
  if (DEFINE_DISCOUNT_COUPON_STATUS <= 1 && defined('MODULE_ORDER_TOTAL_COUPON_STATUS') && MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_DISCOUNT_COUPON) . '">'. BOX_INFORMATION_DISCOUNT_COUPONS.'</a></li>';
}
if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_UNSUBSCRIBE) . '">'. BOX_INFORMATION_UNSUBSCRIBE.'</a></li>';
}
if (DEFINE_PAGE_2_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_PAGE_2) . '">'. BOX_INFORMATION_PAGE_2.'</a></li>';
}
if (DEFINE_PAGE_3_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_PAGE_3) . '">'. BOX_INFORMATION_PAGE_3.'</a></li>';
}
if (DEFINE_PAGE_4_STATUS <= 1) {
        echo '<li><a class="dropdown-item" href="'.zen_href_link(FILENAME_PAGE_4) . '">'. BOX_INFORMATION_PAGE_4.'</a></li>';
}
        echo '</ul>';
?>
        </div>
      </li>

From the 'as-distributed' Bootstrap 4.0, v3.0.0 version of tpl_offcanvas_menu.php, you'll remove lines 69 through 112.

lat9:

From the 'as-distributed' Bootstrap 4.0, v3.0.0 version of tpl_offcanvas_menu.php, you'll remove lines 69 through 112.

Perfect! Thank you so much for all your help! Very much appreciated :wub:

I've just submitted v3.1.0 of the ZCA Bootstrap 4 template for the Zen Cart moderators' review; I'll post back here when it's available for download.

This version has a bunch of bugfixes and other refinements and is a prerequisite for the forthcoming Bootstrap 4 integration with One-Page Checkout. See this (https://github.com/lat9/ZCA-Bootstrap-Template/issues?q=is%3Aissue+milestone%3Av3.1.0) link for details.

lat9:

I've just submitted v3.1.0 of the ZCA Bootstrap 4 template for the Zen Cart moderators' review; I'll post back here when it's available for download.

This version has a bunch of bugfixes and other refinements and is a prerequisite for the forthcoming Bootstrap 4 integration with One-Page Checkout. See this (https://github.com/lat9/ZCA-Bootstrap-Template/issues?q=is%3Aissue+milestone%3Av3.1.0) link for details.
Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

lat9:

Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

Hello Lat, first of all thank you for all the work you do for all of us.

On the common / tpl_header file at line 103

Thanks again.

diamond1:

Hello Lat, first of all thank you for all the work you do for all of us.

On the common / tpl_header file at line 103

<div id = "taglineWrapper" class = "col-sm-12 text-center"> I think you have to change your class like this. <div id = "taglineWrapper" class = "col-sm-6 text-center">

Thanks again.
Why? What symptom are you encountering that brings you to that conclusion?

Changing from 12 to 6 means it would only show across half the width of the screen. By default there are no other corresponding divs that would make up the other 6 in that row.

The suggested change feels like it's unique to your implementation, but you haven't given details of what problem you think your suggestion fixes.

Hello, if we leave it at 12 the BANNERS GROUP_SET2 banners put in the center as well as BANNERS_GROUP_SET2.

Hello, if we leave it at 12 the BANNERS GROUP_SET2 banners put in the center as well as BANNERS_GROUP_SET2.

[Attachment no longer available][Attachment no longer available]