ZCA Bootstrap 4 Template [Support Thread]

Quote:

---

Originally Posted by Dave224

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

Code:

---

<!--bof-navigation display-->
      <div id="navMainWrapper">
          <div id="navMain">
        <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                    <ul class="submenu dropdown-menu">
                          <li>
                          <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                          <ul class="submenu dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                            </li>
                                          </ul>
                                      </li>
                                    </ul>
                                </li>
                            </ul>
                          </li>
                      </ul>
                    </div>
                </nav>
              </div>
          </div>

---

---

See post #269 for a list of great links to various Bootstrap elements. Note, too, that https://w3schools.com has a bunch of "Try It" elements for Bootstrap.

Quote:

---

Originally Posted by Dave224

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

Code:

---

<!--bof-navigation display-->
      <div id="navMainWrapper">
          <div id="navMain">
        <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                    <ul class="submenu dropdown-menu">
                          <li>
                          <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                          <ul class="submenu dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                            </li>
                                          </ul>
                                      </li>
                                    </ul>
                                </li>
                            </ul>
                          </li>
                      </ul>
                    </div>
                </nav>
              </div>
          </div>

---

---

The following seems to work, but only after adding some supporting CSS and Javascript, inspired from https://bootstrapious.com/p/bootstra...level-dropdown

Code:

---

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
  <ul class="dropdown-menu">
      <li><a class="dropdown-item">Level 1 Item 1</a></li>
      <li class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 1 Submenu</a>
          <ul class="dropdown-menu">
              <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 2 Submenu</a>
                  <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">Level 3 Item 1</a>
                    </li>
                  </ul>
              </li>
              <li><a class="dropdown-item">Level 2 Item 2</a></li>
          </ul>
      </li>
  </ul>
</li>

---

stylesheet_submenu.css:

Code:

---

.dropdown-submenu {
  position: relative;
}


.dropdown-submenu>a:after {
  float: right;
  border: none;
  /* change the character and/or font below to suit what you have available */
  content: "\f0da"; 
  font-family: 'FontAwesome';
}


.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

---

jscript_submenu.php

Code:

---

<script>
$(function() {
  // ------------------------------------------------------- //
  // Multi Level dropdowns
  // ------------------------------------------------------ //
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();


    $(this).siblings().toggleClass("show");




    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });


  });
});
</script>

---

You will probably need to tweak the CSS to increase some padding to provide indentation at subsequent levels, or add padding/margin classes to your HTML.

Looking for an assist to help code my style sheet for the ZCAtemplate to put the logo & the tagline centered in the same area. I've been able to get the tag line to go above and below the logo in mobile view, but want them to be aligned with each other in desktop view.

If you goto https://venturedesignandprint.co.uk/ you can see they have aligned the two using the bootstrap template.

I am stuck figuring out the style sheet to the same with mine.
Attachment 19361

Here is the code as I have tpl_header.php currently:

Code:

---

<!--bof-branding display-->
<div id="logoWrapper">
   
  <div id="logo" class="row align-items-center p-3">
  <?php if (HEADER_SALES_TEXT != '') {
          echo '<div class="col-sm-6">';
        } else {
            echo '<div class="col-sm-12">';
            }
            ?>
        <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a><br>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>   
    <div id="taglineWrapper" class="col-sm-12 text-">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline" class="text-right"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
  if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
$find_banners = zen_build_banners_group(SHOW_BANNERS_GROUP_SET2);
$banner_group = 2;
?>

<div class="zca-banner bannerTwo rounded">
<?php
if (ZCA_ACTIVATE_BANNER_TWO_CAROUSEL == 'true') {
require($template->get_template_dir('tpl_zca_banner_carousel.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_zca_banner_carousel.php');
} else {
echo zen_display_banner('static', $banner);
}
?>
</div>
<?php
    }
  }
?>
    </div>
<?php }
// no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  </div>

</div>
<!--eof-branding display-->

---

Try changing your

Code:

---

<div id="taglineWrapper" class="col-sm-12 text-">

---

to

Code:

---

<div id="taglineWrapper" class="col-sm-6 text-right">

---

like the Venture site did.

Quote:

---

Originally Posted by dennisns7d

Try changing your

Code:

---

<div id="taglineWrapper" class="col-sm-12 text-">

---

to

Code:

---

<div id="taglineWrapper" class="col-sm-6 text-right">

---

like the Venture site did.

---

THANK. YOU!
that worked.

Working on a site: www.coffeewitheinstein.com and I'm trying to enlarge the header logo
ZC 1.5.7b
php 7.3
with Shopping cart Reminder
Edit Orders
TY Package tracker
Email Export
Clone Template
ZCA Boot 4
and Order Comment Boiler plate

I've edited the includes/languages/english/mytemplate/header/php file and it isnt affecting the size of the displayed logo.

Is this controlled elsewhere by the style sheet?

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

Quote:

---

Originally Posted by DrByte

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

---

Most Excellent... My 10 year hiatus is showing its wings...

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

Code:

---

$title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

---

Quote:

---

Originally Posted by yesaul

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

Code:

---

$title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

---

---

Thanks for that! The correction will be part of v3.1.0 of the template.

Update: Tracking as part of https://github.com/lat9/ZCA-Bootstra...late/issues/31

Still working on nav menu drop-down menus and sub-menus. I've got them the way I want on large screens but not when the nav menu collapses for small devices. The nav bar containing the "hamburger" icon extends the full width of the screen which is fine. But the drop-down menus and sub-menus also extend across the screen instead of the width required for the contents. I've tried many schemes but I haven't hit on the right html or css to get what I want. The drop-down menus and sub-menus open down as expected.

How can I keep drop-down menus and sub-menus from extending across the entire screen when the nav menu is collapsed?

I am an old hand at building websites and know my way around pretty well when it comes to php, and MySQL but am completely a novice when it comes to Zen Cart. I am using the bootstrap theme which I love so far, thank you.

I added an "about us" define page and I think I am missing a small detail and I just don't know what yet because of my unfamiliarity with Zen Cart (but I am learning fast). The About Us page appears in the information sidebox at desktop width, but in the responsive bit when we get to the "Hamburger Menu" it does not show up at all.

Interesting enough when I look at the site map the About Us page is there but outside of the page hierarchy somehow. You can see it here (unless I find the solution before i get help https://shop.jedipath.academy/index...._page=site_map I figure this is a clue as to what I did wrong or what is missing but my search terms is not turning up anything as to what to modify to get it in the correct place.

Thank you in advance for any help that is forthcoming.

I discovered an issue with 3.0.0 installed on 1.5.7b. If the shipping estimator is configured to display a button that opens the popup, the dropdowns incorrectly display the last states after the country is changed. I found that the template in includes/templates/bootstrap/templates/tpl_modules_shipping_estimator.php was missing the onchange.
I changed line 59 from

PHP Code:

---

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

---

To

PHP Code:

---

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country" onchange="update_zone(this.form);"'); ?>

---

This fixes the issue

Quote:

---

Originally Posted by badarac

I discovered an issue with 3.0.0 installed on 1.5.7b. If the shipping estimator is configured to display a button that opens the popup, the dropdowns incorrectly display the last states after the country is changed. I found that the template in includes/templates/bootstrap/templates/tpl_modules_shipping_estimator.php was missing the onchange.
I changed line 59 from

PHP Code:

---

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

---

To

PHP Code:

---

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country" onchange="update_zone(this.form);"'); ?>

---

This fixes the issue

---

Thanks for the report. The Bootstrap template has been updated to remove those onchange elements, deferring to its jQuery handling. It sounds like that processing needs to be extended to the popup_shipping_estimator page, too.

Quote:

---

Originally Posted by Saundan

I added an "about us" define page and I think I am missing a small detail and I just don't know what yet because of my unfamiliarity with Zen Cart (but I am learning fast). The About Us page appears in the information sidebox at desktop width, but in the responsive bit when we get to the "Hamburger Menu" it does not show up at all.

---

You'll have to add it into /includes/templates/bootstrap/common/tpl_offcanvas_menu.php

Quote:

---

Originally Posted by DrByte

You'll have to add it into /includes/templates/bootstrap/common/tpl_offcanvas_menu.php

---

That was the part that was missing. Thank you so very much. I am grateful. I apologize if the question was off topic for the theme. The learning curve on this is steep I only started looking at Zen Cart on Sunday. I got it in the drop down hamburger menu now but it still off to the side on the sitemap. But I will take it.

Quote:

---

Originally Posted by lat9

Thanks for the report. The Bootstrap template has been updated to remove those onchange elements, deferring to its jQuery handling. It sounds like that processing needs to be extended to the popup_shipping_estimator page, too.

---

FWIW, I've chosen to replace that popup display with a Bootstrap modal. See this (https://github.com/lat9/ZCA-Bootstra...late/issues/42) GitHub issue for additional information. That update will be included in the forthcoming Bootstrap v3.1.0.

If someone is interested I removed the table display from cart, and changed it to divs, following is the code.

Removed from:
<div class="table-responsive">
thru
</form>

PHP Code:

---

<?php
  foreach ($productArray as $product) {
?>
<div class="row fz-product-in-cart">
    <div class="col-12 col-md-6">
        <div class="row">
            <div class="col-12">
<?php echo TABLE_HEADING_PRODUCTS; ?><br><br>
            <a href="<?php echo $product['linkProductsName']; ?>"><?php echo $product['productsImage']; ?><?php echo $product['productsName'] . '' . $product['flagStockCheck'] . ''; ?></a>
            <br class="clearBoth" />
    <?php
    echo $product['attributeHiddenField'];
    if (isset($product['attributes']) && is_array($product['attributes'])) {
    echo '<div class="productsCell-attributes">';
    echo '<ul>';
    foreach ($product['attributes'] as $option => $value) {
    ?>
    <li>
        <?php
        echo $value['products_options_name'] . TEXT_OPTION_DIVIDER . nl2br($value['products_options_values_name']);
        ?>
    </li>
    <?php
        }
      echo '</ul>';
      echo '</div>';
      }
    ?>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="row fz-detail-separator">
            <div class="col-4">
            <?php echo TABLE_HEADING_QUANTITY; ?>
            </div>
            <div class="col-6">
            <?php
            if ($product['flagShowFixedQuantity']) {
            echo $product['showFixedQuantityAmount'] . '' . $product['flagStockCheck'] . '' . $product['showMinUnits'];
            } else {
            echo $product['quantityField'] . '' . $product['flagStockCheck'] . '' . $product['showMinUnits'];
            }
            ?>
            </div>
            <div class="col-2">
            <?php
              if ($product['buttonUpdate'] == '') {
                echo '' ;
              } else {
                echo $product['buttonUpdate'];
              }
            ?>
            </div>
        </div>
        <div class="row">
        <div class="col-12">
            <div class="row fz-detail-separator">
            <div class="col-6">
                <?php echo TABLE_HEADING_PRICE; ?>/unit
            </div>
            <div class="col-6 text-right">
                <?php echo $product['productsPriceEach']; ?>
            </div>
            </div>
            <div class="row fz-detail-separator">
            <div class="col-6">
                <?php echo TABLE_HEADING_TOTAL; ?>/item
            </div>
            <div class="col-6 text-right">
                <?php echo $product['productsPrice']; ?>
            </div>
            </div>
            <div class="row fz-detail-separator">
            <div class="col-12">
            <?php
              if ($product['buttonDelete']) {
            ?>
                <a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&product_id=' . $product['id']); ?>" class="btn"><i class="fas fa-trash-alt"></i></a>
            <?php
            }
            ?>
            </div>
            <div class="col-12">
            <?php
              
              if ($product['checkBoxDelete'] ) {
                echo zen_draw_checkbox_field('cart_delete[]', $product['id'], false, 'aria-label="' . ARIA_DELETE_ITEM_FROM_CART . '"');
              }
            ?>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>
<?php
  } // end foreach ($productArray as $product)
?>
<div class="row fz-cart-total">
    <div class="col-12 col-md-6">
        <div class="row">
            <div class="col-12 fz-update-button">
            <?php
            // show update cart button
              if (SHOW_SHOPPING_CART_UPDATE == 2 or SHOW_SHOPPING_CART_UPDATE == 3) {
            ?>
            <button type="submit" class="btn"><i class="fas fa-sync-alt"></i></button>
            <?php
              } else { // don't show update button below cart
            ?>
            <?php
              } // show update button
            ?>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="row fz-cart-total-price">
            <div class="col-6">
            <?php echo SUB_TITLE_SUB_TOTAL; ?>
            </div>
            <div class="col-6 text-right">
            <?php echo $cartShowTotal; ?>
            </div>
        </div>
    </div>
</div>

<!--bof shopping cart buttons-->
    <div class="row">
        <div class="col-12 col-sm-6 order-sm-2 fz-checkout-button">
            <?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a>'; ?>
        </div>
        <div class="col-12 col-sm-6">
            <?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_CONTINUE_SHOPPING, BUTTON_CONTINUE_SHOPPING_ALT) . '</a>'; ?>
        </div>
    </div><!-- .row .fz-cart-row-wrap -->
<!--eof shopping cart buttons-->
</form>

---

The css

Code:

---

.fz-product-in-cart {border: 1px solid #099f36; margin: 0.9rem auto;}
.fz-cart-total {border: 1px solid #099f36; margin: 0.9rem auto; background-color: rgba(144, 243, 135, 0.45);}
.fz-detail-separator {border-bottom: 1px solid #099f36; margin: 0 -0.19rem; padding: 0.9rem 0.27rem;}
.fz-detail-separator:last-child {border: none;}
.fz-update-button {padding: 0.63rem;}
.fz-cart-total-price{margin: 0 -0.19rem; padding: 0.9rem 0.27rem;}
.row.fz-shipping-method {margin: 0;}

---

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. I have turned all sideboxes off. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21

Quote:

---

Originally Posted by Dave224

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. I have turned all sideboxes off. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21

---

Dave, I'm not seeing that behavior on a 'stock' installation like the demo (https://vinosdefrutastropicales.com/zc157_bs4). Perhaps if you'd be more specific with the screen widths, additional help could be provided.

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

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by lat9

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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...

Quote:

---

Originally Posted by 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 :/

Quote:

---

Originally Posted by 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".

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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:

Code:

---

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

Quote:

---

Originally Posted by 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-Bootstra...stone%3Av3.1.0) link for details.

Quote:

---

Originally Posted by 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-Bootstra...stone%3Av3.1.0) link for details.

---

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

Quote:

---

Originally Posted by 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
<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.

Quote:

---

Originally Posted by 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.

Attachment 19406
Attachment 19407

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

Attachment 19408Attachment 19409

Localhost install of new ZC 157b. No other addons. Just installed the 3.1.0 over the 3.0.0. The change seem to break the product list layout such that the product contents has collapsed down leaving the images outside of the layout box.
Attachment 19410

Quote:

---

Originally Posted by kwright

Localhost install of new ZC 157b. No other addons. Just installed the 3.1.0 over the 3.0.0. The change seem to break the product list layout such that the product contents has collapsed down leaving the images outside of the layout box.
Attachment 19410

---

Sure enough; let me see what the heck is going on.

@kwright, what is your setting for Configuration :: Product Listing :: Columns per row? I'm guessing that it's 3; does the page render correctly if you change that to 0?

Quote:

---

Originally Posted by lat9

@kwright, what is your setting for Configuration :: Product Listing :: Columns per row? I'm guessing that it's 3; does the page render correctly if you change that to 0?

---

Yup, that was it. Easy fix, thanks!

Quote:

---

Originally Posted by kwright

Yup, that was it. Easy fix, thanks!

---

Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.

Quote:

---

Originally Posted by lat9

Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.

---

Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.


Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong

Quote:

---

Originally Posted by DrByte

Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.


Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong

---

Thanks for that @DrByte; I'll use that GitHub issue to update the template's documentation.

Quote:

---

Originally Posted by lat9

Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.

---

Quote:

---

Originally Posted by DrByte

Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.


Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong

---

What if I want to use more than the "standard" 3 columns?

Quote:

---

Originally Posted by keneso

What if I want to use more than the "standard" 3 columns?

---

If you don't like the number of columns used by default for the fluid layout, you can customize them around line 182:

Code:

---

        // set css classes for "row" wrapper, to allow for fluid grouping of cells based on viewport
        // these defaults are based on Bootstrap4, but can be customized to suit your own framework
        if ($product_listing_layout_style === 'fluid') {
            $grid_cards_classes = 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3';
            // this array is intentionally in reverse order, with largest index first
            $grid_classes_matrix = [
                '10' => 'row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-5',
                '8' => 'row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
                '6' => 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3',
            ];

---

I'm really liking this template, really appreciate all of the work and support the author and supporters have put into this template! Like working with the Bootstrap framework as well.

I'm migrating away from the Winchester Responsive template to the ZCA Bootstrap 4 Template, I would like incorporate/replicate some of the key features that I really like from the Winchester Responsive template.

My top 3:
Header Dropdown Responsive Slim Menu
Responsive Home Page Flexslider
Flexible Footer Menu

I have already incorporated the Flexible Footer Menu Multilingual addon and styled it with Bootstrap. I would now like to incorporate/replicate the Winchester Responsive Header Dropdown Slim Menu, using Bootstrap of course.

Recommendations? Anyone using something similar? Would it make sense to use something like slimmenu since jQuery is already being used and style it using Bootstrap?

Quote:

---

Originally Posted by kwright

I'm really liking this template, really appreciate all of the work and support the author and supporters have put into this template! Like working with the Bootstrap framework as well.

I'm migrating away from the Winchester Responsive template to the ZCA Bootstrap 4 Template, I would like incorporate/replicate some of the key features that I really like from the Winchester Responsive template.

My top 3:
Header Dropdown Responsive Slim Menu
Responsive Home Page Flexslider
Flexible Footer Menu

I have already incorporated the Flexible Footer Menu Multilingual addon and styled it with Bootstrap. I would now like to incorporate/replicate the Winchester Responsive Header Dropdown Slim Menu, using Bootstrap of course.

Recommendations? Anyone using something similar? Would it make sense to use something like slimmenu since jQuery is already being used and style it using Bootstrap?

---

That's the beauty of this template, IMO ... it's standards-based so that there are a ton of modifications available. You could try, for instance, Googling bootstrap 4 dropdown submenu to get a feeling for what's been done before.

I don't suggest using the slimmenu, not because it's bad, but that's just going to make a site have that many more things to manage.

Thanks @lat9,

Yes, been Googling until my wrist is sore! Too many options, which is good I guess. Think I'll try a few and see how they look in the template.

You have any favorites for a banner slider?

Quote:

---

Originally Posted by kwright

Thanks @lat9,

Yes, been Googling until my wrist is sore! Too many options, which is good I guess. Think I'll try a few and see how they look in the template.

You have any favorites for a banner slider?

---

I've got one in development, but it might be published commercially.

Quote:

---

Originally Posted by lat9

I've got one in development, but it might be published commercially.

---

Keep me posted!

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

This version corrects the shipping-estimator's display on the shopping_cart page when state dropdowns are in use and the selected country has no zones. In that case, the state entry input is being disabled. See GitHub issue #48 for details.

Note that this release adds the file /includes/modules/bootstrap/shipping_estimator.php.

I've just submitted v1.0.0 of the Bootstrap-4 Template support for One-Page Checkout. When approved by the Zen Cart moderators, that sub-template can be downloaded here: https://www.zen-cart.com/downloads.php?do=file&id=2305
.

Early adopters can download the plugin's zip-file from its GitHub repository: https://github.com/lat9/bs4_opc/releases

Quote:

---

Originally Posted by lat9

I've just submitted v1.0.0 of the Bootstrap-4 Template support for One-Page Checkout. When approved by the Zen Cart moderators, that sub-template can be downloaded here: https://www.zen-cart.com/downloads.php?do=file&id=2305
.

Early adopters can download the plugin's zip-file from its GitHub repository: https://github.com/lat9/bs4_opc/releases

---

Now available for download from the Zen Cart downloads.

First of all thank you for an amazing template, I have been able to customise pretty much the way I want for now. The only thing I'm having an issue with is the product page, where I can't get the Add to Cart box and price to display above the product description on mobile. Some of the product descriptions are rather long and I don't like that customers have to scroll so far down to "click" add to cart.

Quote:

---

Originally Posted by Shifty_J

First of all thank you for an amazing template, I have been able to customise pretty much the way I want for now. The only thing I'm having an issue with is the product page, where I can't get the Add to Cart box and price to display above the product description on mobile. Some of the product descriptions are rather long and I don't like that customers have to scroll so far down to "click" add to cart.

---

I'm glad you like the template, it's been a team effort taking over where Ray Barbour left off!

You can move that price/add-to-cart section above the descriptions by moving (from an as-distributed v3.0.0/3.1.0 tpl_product_info_display.php) lines 231 through 302 after line 107.

Quote:

---

Originally Posted by lat9

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

This version corrects the shipping-estimator's display on the shopping_cart page when state dropdowns are in use and the selected country has no zones. In that case, the state entry input is being disabled. See GitHub issue #48 for details.

Note that this release adds the file /includes/modules/bootstrap/shipping_estimator.php.

---

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

Quote:

---

Originally Posted by lat9

I'm glad you like the template, it's been a team effort taking over where Ray Barbour left off!

You can move that price/add-to-cart section above the descriptions by moving (from an as-distributed v3.0.0/3.1.0 tpl_product_info_display.php) lines 231 through 302 after line 107.

---

Thanks so much for the quick reply. I did that earlier however it stretches the price block and add to cart to fill the row, then where it was I have a very lonely "Manufacturers Block" and "Ask a Question".

Is it possible to keep it where it is normally but display above the description on mobile. Otherwise, maybe I could create a duplicate but just hide it at certain screen sizes?

Quote:

---

Originally Posted by Shifty_J

Thanks so much for the quick reply. I did that earlier however it stretches the price block and add to cart to fill the row, then where it was I have a very lonely "Manufacturers Block" and "Ask a Question".

Is it possible to keep it where it is normally but display above the description on mobile. Otherwise, maybe I could create a duplicate but just hide it at certain screen sizes?

---

That highlighted solution is probably your quickest path to success.

Quote:

---

Originally Posted by lat9

That highlighted solution is probably your quickest path to success.

---

Actually, you could try moving the displayColRight elements (lines 135 through 304) to before the displayColLeft elements (that start on line 55). That'll swap the left/right columns and move the price/add-to-cart (and other righthand elements) to the top of the mobile display.

That kind of worked, but threw the layout a bit.

I have pretty much got it working / looking the way I want.

I created a new <div id="productInfo-displayRow" class="row"> directly under the product name <h1> then replicated the <div id="productInfo-displayColLeft" class="col-sm mb-3"> and <div id="productInfo-displayColRight" class="col-sm mb-3">.
Then I simply put the image + additional image code into the left column and all the manufacturer/ask a question/attribute/price/add to cart code into the right column.

Just need to do a little tweaking but I'm getting there.

Once I get it looking better and have cleaned it up I can post it here.

I've just installed version 3.1.1 of this template and noted a slider appears whenever a dropdown menu is clicked on the nav bar. Not sure that slider is the correct term, but how can I turn this feature off?
Dave

Actually, the feature is pretty nifty. I'd like to move the slider next to the dropdown rather than at the side of the nav bar, and style the slider a bit. Can't seem to get a developer tool to identify it.
Dave

Quote:

---

Originally Posted by Dave224

Actually, the feature is pretty nifty. I'd like to move the slider next to the dropdown rather than at the side of the nav bar, and style the slider a bit. Can't seem to get a developer tool to identify it.
Dave

---

Dave, that might be the use of the banner-slider. Do you have any banners active via the admin's Banner Manager?

Well, nothing was changed by me regarding banners after updating the template to 3.1.1. To answer your question, the banner manager shows status red for all banners. The banner carousel features are all false. The banner display groups are set for header position 3, footer position 2 and sidebox banner-box. The website pages do not display any banners.
Dave

See attachment to see what it looks like.
Dave

Quote:

---

Originally Posted by Dave224

See attachment to see what it looks like.
Dave

---

Hmm, that's something to do with the customizations that you've applied. Is that the mobile or desktop rendering?

It appears on desktop rendering; it does not appear on mobile. This must be something in Bootstrap 4.6 that's not in 4.5 or something in the template 3.1.1 that's not in 3.0.0. I have not changed anything to customize that wasn't there before the update.
Dave

Quote:

---

Originally Posted by Dave224

It appears on desktop rendering; it does not appear on mobile. This must be something in Bootstrap 4.6 that's not in 4.5 or something in the template 3.1.1 that's not in 3.0.0. I have not changed anything to customize that wasn't there before the update.
Dave

---

There were a fair number of changes going from Bootstrap 4.5.3 to 4.6.0 (https://github.com/twbs/bootstrap/releases/tag/v4.6.0) and the template's 3.0.0 to 3.1.0 changes affected most everything.

Quote:

---

Originally Posted by lat9

There were a fair number of changes going from Bootstrap 4.5.3 to 4.6.0 (https://github.com/twbs/bootstrap/releases/tag/v4.6.0) and the template's 3.0.0 to 3.1.0 changes affected most everything.

---

I replaced the link to bootstrap 4.6.0 with the previous link to version 4.5.3 in includes/templates/bootstrap/html_header.php. The dropdown slider is still present.
Dave

The problem is in includes/templates/bootstrap/css/stylesheet.css around line 31. I think the following code is intended for mobile only, but I believe the code is applied to both desktop and mobile.

Code:

---

/* set height of scrollable area in mobile menu */
div#navbarSupportedContent {
    max-height:90vh;
    overflow-y:auto;
}

---

If I comment out the code, the dropdown slider does not appear.

Dave

Quote:

---

Originally Posted by Dave224

The problem is in includes/templates/bootstrap/css/stylesheet.css around line 31. I think the following code is intended for mobile only, but I believe the code is applied to both desktop and mobile.

Code:

---

/* set height of scrollable area in mobile menu */
div#navbarSupportedContent {
    max-height:90vh;
    overflow-y:auto;
}

---

If I comment out the code, the dropdown slider does not appear.

Dave

---

I think you've customized the header nav and the mobile nav in a way that combines them into the same div instead of them being separate, else it wouldn't show on desktop mode.

Hi @rbarbour,

FYI, The demo site url http://www.zcadditions.com/bootstrap_tpl_demo/ says that it expired yesterday

Quote:

---

Originally Posted by greg_beyer

Hi @rbarbour,

FYI, The demo site url http://www.zcadditions.com/bootstrap_tpl_demo/ says that it expired yesterday

---

Unfortunately, @rarbour hasn't been around for a while. The updated demo site (for v3.0.0 and later) is https://vinosdefrutastropicales.com/zc157_bs4/.

Hi, I was just wondering if someone could point me in the right direction as to what needs editing here. My new products listing https://earthlywhispers.com/shop/ind...e=products_new also my categories such as: https://earthlywhispers.com/shop/ind...ndex&cPath=4_5 when displayed in the mobile version you can't see the images, a teenie tiny little image and large text :/ What would I need to change for it to look a bit normal with the image bigger and text smaller? Thank you.

Quote:

---

Originally Posted by Opal5

Hi, I was just wondering if someone could point me in the right direction as to what needs editing here. My new products listing https://earthlywhispers.com/shop/ind...e=products_new also my categories such as: https://earthlywhispers.com/shop/ind...ndex&cPath=4_5 when displayed in the mobile version you can't see the images, a teenie tiny little image and large text :/ What would I need to change for it to look a bit normal with the image bigger and text smaller? Thank you.

---

That appears to be an artifact of using rows instead of columns for the product-related listings' display. Those listings display better in the template's responsive mode, changing Configuration :: Product Listing :: Columns per Row from 1 to 0.

Quote:

---

Originally Posted by lat9

That appears to be an artifact of using rows instead of columns for the product-related listings' display. Those listings display better in the template's responsive mode, changing Configuration :: Product Listing :: Columns per Row from 1 to 0.

---

Thank you so much! Perfect!!! You're a star! :)

The Bootstrap template is now featured in the Zen Cart templates documentation. Thank you, Bootstrap template team!

https://docs.zen-cart.com/user/templ...her_templates/

Newly installed v157c with bootstrap. How can I adjust the size of the padding for the New Products and Featured Products headers on the main page?
I can see the changes if I make them in my browser's developer tool, but not when they're placed in bootstrap/css/stylesheet.css. Is it controlled somewhere else?

Quote:

---

Originally Posted by Joseph M

Newly installed v157c with bootstrap. How can I adjust the size of the padding for the New Products and Featured Products headers on the main page?
I can see the changes if I make them in my browser's developer tool, but not when they're placed in bootstrap/css/stylesheet.css. Is it controlled somewhere else?

---

You could add a rule to your site's bootstrap/stylesheet.css, e.g.

Code:

---

.centerBoxHeading {padding: 10px; }

---

And be sure to force-reload the page in your browser for the change to take effect:
https://docs.zen-cart.com/user/new_u...owser_caching/

Quote:

---

Originally Posted by lat9

You could add a rule to your site's bootstrap/stylesheet.css, e.g.

Code:

---

.centerBoxHeading {padding: 10px; }

---

And be sure to force-reload the page in your browser for the change to take effect:
https://docs.zen-cart.com/user/new_u...owser_caching/

---

Thank you. It worked perfectly for both headers.

Hi Guys,

Just wondering if there is any way of "borrowing" the tabbed login page from this template and using it in another?

Would it be a case of using the tpl_login_default.php and tpl_modules_create_account.php and then loading bootstrap 4 css on these pages only?

Im currently using 1.5.6c, any help would be much appreciated!

Quote:

---

Originally Posted by Blackfromthered

Hi Guys,

Just wondering if there is any way of "borrowing" the tabbed login page from this template and using it in another?

Would it be a case of using the tpl_login_default.php and tpl_modules_create_account.php and then loading bootstrap 4 css on these pages only?

Im currently using 1.5.6c, any help would be much appreciated!

---

I believe, but am not totally sure, that you'd be looking for trouble if you separate the bootstrap-4 CSS from its associated jQuery/js module. The tab-panes used in the login page require (I think) both elements.

Quote:

---

Originally Posted by lat9

I believe, but am not totally sure, that you'd be looking for trouble if you separate the bootstrap-4 CSS from its associated jQuery/js module. The tab-panes used in the login page require (I think) both elements.

---

Maybe this can help
https://www.w3schools.com/bootstrap/...ref_js_tab.asp

Can I assign the same style rules to the EZ-Pages header as those assigned to the header's navigation tabs? How does one move or align items in these boxes? I've been able to change the background with my browser's developer tool, but nothing else.

Quote:

---

Originally Posted by Joseph M

Can I assign the same style rules to the EZ-Pages header as those assigned to the header's navigation tabs? How does one move or align items in these boxes? I've been able to change the background with my browser's developer tool, but nothing else.

---

I wanted to use EZ-page links to display some main categories that are only used for linked products, without showing all of my main categories. The navigational tabs apparently make me choose between all or nothing. So I used EZ-Page links for the handful of categories I wanted showing, and built a navigational bar containing only some main categories. I was able to center the EZ-pages header content by adding this to my stylesheet:

Code:

---

.nav {
        justify-content: center;
}

---

I put spacing spacing between each of the listed categories with:

Code:

---

.nav-pills .nav-link {
    margin: 5px 8px;
}

---

I'm not sure if that was the correct way to do it, but it seems to work.

Hello,

Wow this is great !! I can't wait to try this on my live store. I just had a question how to enable 3 Column Layout after installing your add on. Also the color changing part was FREAKING genius !

Quote:

---

Originally Posted by jasonshanks

Hello,

Wow this is great !! I can't wait to try this on my live store. I just had a question how to enable 3 Column Layout after installing your add on. Also the color changing part was FREAKING genius !

---

I can't take credit for the color-changing bits; that feature was there in the original Bootstrap template.

If you're asking about "3 columns" meaning "sidebar plus middle content plus sidebar", take a look at the Configuration :: Layout Settings :: Response {Left | Center | Right} Column Width settings. The sum of those values should add up to 12, with the default being 3 + 6 + 3.

If you mean "how do I show my products as a grid of 3 columns instead of 1 per row", which is built-in to Zen Cart v1.5.7, look at Configuration:: Product Listing :: Columns Per Row

Quote:

---

Originally Posted by mprough

Changing Columns Per Row from 4 to 3 fixed it, but on large screens we would really rather have 4

---

I’ve been trying to use your instructions to fix the layout issue I have. Sorry for the bad picture, but this is what my products look like under each category. However, the new items are displayed exactly like I want them to be. How do I fix my products within each category to display exactly like they do for the new products?


Attachment 19529

Attachment 19530

Quote:

---

Originally Posted by mprough

Quote:

---

Originally Posted by arxvaldex

In Admin goto Configuration - Product Listing

Check Product Listing - Columns Per Row (Default Setting is 3)

Also check your stylesheet.css should have the following:
(Stylesheet is located in includes/templates/bootstrap)

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

---

Changing Columns Per Row from 4 to 3 fixed it, but on large screens we would really rather have 4

---

Those details are based on an old version of the template.

With v3 of the BS4 template, the "column-count" CSS properties are completely replaced with an updated implementation using built-in Bootstrap 4 features.
If you don't like the arrangement offered at each level of number of columns, you can change the Bootstrap classes that are applied as described in one of the comments to the code change discussed here: https://github.com/lat9/ZCA-Bootstrap-Template/pull/24

Quote:

---

Originally Posted by DrByte

Those details are based on an old version of the template.

With v3 of the BS4 template, the "column-count" CSS properties are completely replaced with an updated implementation using built-in Bootstrap 4 features.
If you don't like the arrangement offered at each level of number of columns, you can change the Bootstrap classes that are applied as described in one of the comments to the code change discussed here: https://github.com/lat9/ZCA-Bootstrap-Template/pull/24

---

I appreciate the answer. That’s waaaaay more than I’m capable of. :shocking:

I was hoping there would be a way to do this from the admin.

Quote:

---

Originally Posted by arxvaldex

In Admin goto Configuration - Product Listing

Check Product Listing - Columns Per Row (Default Setting is 3)

Also check your stylesheet.css should have the following:
(Stylesheet is located in includes/templates/bootstrap)

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

---

Quote:

---

Originally Posted by gizmo_girl

I appreciate the answer. That’s waaaaay more than I’m capable of. :shocking:

I was hoping there would be a way to do this from the admin.

---

No no, my point was: don't do that old change from 2019 that you had quoted from (and which I re-quoted in more detail).
ie: remove it if you had added it before posting.

Instead, just use the admin switch for columns-per-row and set it to what you want.
I know it works fine out-of-the-box in the BS4 template. Not sure what alterations would be causing the anomaly you screenshotted.
Might be necessary to post the URL so that the raw HTML/CSS can be inspected with a browser's dev-tools.

Quote:

---

Originally Posted by DrByte

No no, my point was: don't do that old change from 2019 that you had quoted from (and which I re-quoted in more detail).
ie: remove it if you had added it before posting.

Instead, just use the admin switch for columns-per-row and set it to what you want.
I know it works fine out-of-the-box in the BS4 template. Not sure what alterations would be causing the anomaly you screenshotted.
Might be necessary to post the URL so that the raw HTML/CSS can be inspected with a browser's dev-tools.

---

Thanks, Dr Byte! I think I’m getting closer, at least on this issue! I appreciate your help!

I would like to swap the positions of the header search bar and the nav links (search bar left, nav links right) with the search bar resizing/stretching into any space not required by the nav links. Can I do that from the stylesheet, or do I have to change the header template?

Quote:

---

Originally Posted by Joseph M

I would like to swap the positions of the header search bar and the nav links (search bar left, nav links right) with the search bar resizing/stretching into any space not required by the nav links. Can I do that from the stylesheet, or do I have to change the header template?

---

My take is that you're looking at changing your Bootstrap clone's header template. Perhaps someone with more in-depth CSS knowledge has another solution?

Quote:

---

Originally Posted by lat9

My take is that you're looking at changing your Bootstrap clone's header template. Perhaps someone with more in-depth CSS knowledge has another solution?

---

Perhaps, or even just part of the solution. For a quick switch I changed the includes/templates/bootstrap/common/tpl_header.php, by moving the code for the search bar:

Code:

---

  <?php require(DIR_WS_MODULES . zen_get_module_sidebox_directory('search_header.php')); ?>

---

above

Code:

---

    <ul class="navbar-nav mr-auto">

---

.
It seems to have worked in swapping their relative location, but everything was on the left.
I believe it was mentioned in an earlier post that changing that to

Code:

---

    <ul class="navbar-nav ml-auto">

---

moves the links to the right.
This places each element in the location that I want them. I just want to expand the header search bar now to adjust to the empty space unused by the nav links. The image shows how the search bar appears now(above), and how I want it to appear (below). Thank you.

Attachment 19535

I'm having a problem setting the color of the EZ-page footer bar links background on hover. No problem with the text, since it is selected in ZCA Bootstrap Colors. However the footer link background color on hover selection isn't listed there.

Quote:

---

Footer EZ-Page Bar Background Color, EZ-Page Bar Link Color, EZ-Page Bar Link Color on Hover

---

I've tried defining it in my stylesheet with:

Code:

---

#ezpagesBarFooter a.nav-link:hover {
    color: #ffffff;
    background-color: #color of choice;
}

---

but it always displays the default color #33b5e5 for the hover background. The changes show up in my browser developer tool, but seem to be overridden when attempting to get the change to appear on my site. Any suggestions?

side note: Oddly, the "Button Color" option ZCA Bootstrap Colors does change the link background hover color in the EZ-pages footer (while changing button colors throughout the site as well).