ZCA Bootstrap 4 Template [Support Thread]

Read this thread (this is for centering the logo - replace Center with Right)

https://www.zen-cart.com/showthread.php?223910-ZCA-Bootstrap-4-Template-Support-Thread&p=1387955&highlight=align+logo#post1387955

AlgellA:

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

Read this thread (this is for centering the logo - replace Center with Right)

https://www.zen-cart.com/showthread.php?223910-ZCA-Bootstrap-4-Template-Support-Thread&p=1387955&highlight=align+logo#post1387955

While trying to adjust the css to change all backgrounds to black using ZCA bootstrap colors in Admin I am still having trouble with the product listing pages. Despite everything changed to black background these pages are still showing up with a white background. CSS element inspection shows it is being inherited from .card (my css knowledge is slightly above zero so this could be incorrect). If I uncheck the 'background-color: #fff; in the inspector it switches to the correct black background color. All other aspects of the bootstrap template seem to be showing up correctly.

roodney:

While trying to adjust the css to change all backgrounds to black using ZCA bootstrap colors in Admin I am still having trouble with the product listing pages. Despite everything changed to black background these pages are still showing up with a white background. CSS element inspection shows it is being inherited from .card (my css knowledge is slightly above zero so this could be incorrect). If I uncheck the 'background-color: #fff; in the inspector it switches to the correct black background color. All other aspects of the bootstrap template seem to be showing up correctly.Bootstrap comes with includes/templates/bootstrap/css/dist-site_specific_styles.php.
You can take that file, add the specific styles that you need and save it as includes/templates/your_template/css/site_specific_styles.php. Of course, if you could post the URL, more help can be provided with a look at the site. Use something like your_siteDOTcom if you don't want the Search Engines looking just yer.

currently using Zc 1.5.7 with Bootstrap 3.3.0 template.

Is it possible to have the menu from the "hamburger" coming from the side as opposed to dropdown when on mobile/tablet?

site is at royal-fleur.com/upgrade if needed.

Thank you

nicksab:

currently using Zc 1.5.7 with Bootstrap 3.3.0 template.

Is it possible to have the menu from the "hamburger" coming from the side as opposed to dropdown when on mobile/tablet?

site is at royal-fleur.com/upgrade if needed.

Thank you
I'm sure it is ... with customization. That's one of the benefits of the Bootstrap template, since it uses a standard interface for its display. You can Google bootstrap 4 hamburger side menu for some ideas.

lat9:

I'm sure it is ... with customization. That's one of the benefits of the Bootstrap template, since it uses a standard interface for its display. You can Google bootstrap 4 hamburger side menu for some ideas.

Thank you. I took a quick look at it and seems a bit more challenging than i thought and may create more issues down the line. That will have to wait for now.

I need help with the login page.

I would like to invert the login display/order.

By default, it displays the returning customer form and link first .

I would like the new customer/ create account to be first instead.

I changed the code in tpl_login_default.php from ```
nav class="pt-3">

<div class="nav nav-tabs" id="nav-tab" role="tablist">

<a class="nav-item nav-link" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-home" aria-selected="true"><?php echo HEADING_RETURNING_CUSTOMER; ?></a> 

<a class="nav-item nav-link active" id="nav-create-tab" data-toggle="tab" href="#nav-create" role="tab" aria-controls="nav-profile" aria-selected="false"><?php echo HEADING_NEW_CUSTOMER; ?></a>

</div> </nav> ```

to

nav class="pt-3">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
   
    <a class="nav-item nav-link active" id="nav-create-tab" data-toggle="tab" href="#nav-create" role="tab" aria-controls="nav-profile" aria-selected="true"><?php echo HEADING_NEW_CUSTOMER; ?></a>
	<a class="nav-item nav-link" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-home" aria-selected="false"><?php echo HEADING_RETURNING_CUSTOMER; ?></a>
  </div>
</nav>

So far the tab order has been inverted as expected.

However, the form being displayed is incorrect. It shows the "returning/login form " by default instead of the "create account form"

How can i fix this please?

The site is at www.royal-fleur.com/upgrade.

Thank you for all your help

nicksab:

I need help with the login page.

I would like to invert the login display/order.

By default, it displays the returning customer form and link first .

I would like the new customer/ create account to be first instead.

I changed the code in tpl_login_default.php from ```
nav class="pt-3">

<div class="nav nav-tabs" id="nav-tab" role="tablist">

<a class="nav-item nav-link" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-home" aria-selected="true"><?php echo HEADING_RETURNING_CUSTOMER; ?></a> 

<a class="nav-item nav-link active" id="nav-create-tab" data-toggle="tab" href="#nav-create" role="tab" aria-controls="nav-profile" aria-selected="false"><?php echo HEADING_NEW_CUSTOMER; ?></a>

</div> </nav> ``` > > to > > ``` nav class="pt-3"> <div class="nav nav-tabs" id="nav-tab" role="tablist">

<a class="nav-item nav-link active" id="nav-create-tab" data-toggle="tab" href="#nav-create" role="tab" aria-controls="nav-profile" aria-selected="true"><?php echo HEADING_NEW_CUSTOMER; ?></a>
<a class="nav-item nav-link" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-home" aria-selected="false"><?php echo HEADING_RETURNING_CUSTOMER; ?></a>

</div> </nav> ``` > > So far the tab order has been inverted as expected. > > However, the form being displayed is incorrect. It shows the "returning/login form " by default instead of the "create account form" > > How can i fix this please? > > The site is at [www.royal-fleur.com/upgrade.](http://www.royal-fleur.com/upgrade.) > > Thank you for all your help There's a configuration setting, ***One-Page Checkout Settings :: Login-Page Layout***, that can be used to control the (er) layout of the login page without code modification.

Noting also that the link you identified results in a 404.

lat9:

There's a configuration setting, One-Page Checkout Settings :: Login-Page Layout, that can be used to control the (er) layout of the login page without code modification.

Noting also that the link you identified results in a 404.

Sorry about the non working link. Somehow a "dot" got added to the link.

The site is at https://www.royal-fleur.com/upgrade/index.php?main_page=login.

I did look at the OPC login page layout but i like the tab look better over the "box" look of OPC.

What i am trying to achieve is to have potential customer entering their information right after shopping cart page and offer a link to login if they are returning customer. Right now, it is doing the opposite. In my industry, customer is usually first/one time client. If they do returns, they just create a new account because of not remembering the login of their previous one.

Hello everyone,

I am back with another question ( sorry ).

I would like to replace the store logo by having the store name center inside of the navbar on the right side of the hamburger.

Here is where i am at:

I managed to remove the store logo on small screen but no luck with the store name. I tried a few things but it messes the layout .

I would like the navbar to read as follow on small screen ( no logo displayed)

hamburger ------ store name with home link ------- search glass ( if possible instead of in the collapse menu)

Anyone has done something like that ? or can help me please?

The site is at https://www.royal-fleur.com/upgrade

Thank you in advance for your much appreciated assistance

Little bit too much in the change department to be able to help. Can't see all the changes you've made in files.

A home link should always be seen in the mobile if not changed.

You should not see two search icons on a desktop and when you click on the hamburger.

Can you take a look at https://www.jeandretDOTcom/index.php?t=ADA_Boot3_3 and let us know what you need different?

dbltoe:

Little bit too much in the change department to be able to help. Can't see all the changes you've made in files.

A home link should always be seen in the mobile if not changed.

You should not see two search icons on a desktop and when you click on the hamburger.

Can you take a look at https://www.jeandretDOTcom/index.php?t=ADA_Boot3_3 and let us know what you need different?

Thank you dbltoe for the link. What i am trying to achieve is a bit different.

Sorry about the 2 search icons. I was trying a few things with the following file bootstrap/common/template_header.php.

The look I am trying to achieve is similar to this site https://rafaelflorist.com/ on mobile.

Basically, the logo ( zen cart or else) as seen on desktop disappear on small and medium screen. When the logo is not shown, it is replace by the store name in the navbar ( linkable if possible ). The navbar on mobile looks really blank/dull on my site

As for the search icon, it would be great if it would always be in the top right corner ( right side of navbar) no matter the screen size. The search icon in the hamburger could be remove so it is not being duplicated.

Sorry for the long post and for the no so clear explanation. I understand i am asking for a lot with this and would understand if it is not possible to accomplish.

Thank you for your time and advice

I got to display as close as i can get it to what i want.

Here is my tpl_header.php code:```

<?php /** * Common Template - tpl_header.php * * BOOTSTRAP v3.1.2 * * * @copyright Copyright 2003-2020 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: DrByte 2020 May 19 Modified in v1.5.7 $ */ ?> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper" class="mt-5"> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom"> <button class="navbar-toggler" style="color:#333;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i> </button> <div class="d-md-none"> <a class="navbar-brand" style="color:#fff; font-family:auto; font-size:1.5rem;" href="">Royal Fleur Florist</a>

</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <?php if (!$this_is_home_page) { ?> <li class="nav-item"> <?php echo '<a class="nav-link" href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo '<i class="fas fa-home"></i> ' . HEADER_TITLE_CATALOG; ?></a> </li> <?php } ?> <?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?> <li class="nav-item"> <a class="nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> </li> <?php } else { if (STORE_STATUS == '0') { ?> <li class="nav-item"> <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> </li> <?php } } ?> <?php if ($_SESSION['cart']->count_contents() != 0) { ?> <li class="nav-item"> <a class="nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a> </li> <?php }?> <?php require($template->get_template_dir('tpl_offcanvas_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_offcanvas_menu.php');?>

</ul>

</div> <div> <?php require(DIR_WS_MODULES . zen_get_module_sidebox_directory('search_header.php')); ?> </div> </nav> </div> </div> <!--eof-navigation display--> <!--bof-branding display--> <div id="logoWrapper"> <div id="logo" class="row align-items-center p-3 d-none d-md-block"> <?php if (HEADER_SALES_TEXT != '') { echo '<div class="col-sm-4">'; } 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-center"> <?php if (HEADER_SALES_TEXT != '') { ?> <div id="tagline" class="text-center"><?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--> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo zen_output_string_protected(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo zen_output_string_protected($_GET['info_message']); } ?> <!--eof-header logo and navigation display--> <!--bof-optional categories tabs navigation display--> <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?> <!--eof-optional categories tabs navigation display--> <br> <!--bof-header ezpage links--> <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' && zen_is_whitelisted_admin_ip())) { ?> <?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?> <?php } ?> <!--eof-header ezpage links--> </div> <!--bof-mega menu display--> <?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php');?> <!--eof-mega menu display--> <div class="clearBoth"></div> <?php } ?> ```

I am in no way a coder so i am not sure if it is the right way to do it

It seems to works so far ( no error logs :-) ) except for one thing:

When on mobile, the search icon somehow gets pulled inside the toggler when it is click on. Is there a way to fix it? please

Thank you

While on mobile (small screen), the shopping cart table requires scrolling in order to see the "total" column.

If thesmall screenison landscape,the shopping cart table is displayed/seen in full. It seems to be too big for the small screen in portrait mode.

Is there away to fix it so there is no scrolling and the table is shown in full?

I looked at post #211 thru #218 which seems to be similar issue but the fix does not work for me. It is not android or iphone related i believe.

Thank you

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

dbltoe:

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

This is a known bug - I brought it up with lat9 when having my site upgraded.
It only happens when you have an item with attributes in the cart. It is the offset of the attributes causing it on small screens.
Tested on the above site with "TEST $120 Special $90" on my old Moto E4+
Attributes cause scrolling. Non attributes don't.
Same result using Chrome emulator on pc.

dbltoe:

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

I tried jeandretDOTcom and it is behaving the same way as my site. For reference, my site is royal-fleurDOTcom/upgrade.

I tried a few different thing on either site.

While in the shopping cart page:

• if the product has no attribute, the table (quantity/item name/price/total) is display is display within the "viewport"

-if the product has attributes, the colum total from the table gets push to the side like out of the "viewport"

Hope this makes and sorry for the lack of better words to describe it.

Picture from jeandret site :

No attributes on product

With both attribute and no attribute

Thank you for looking into this and helping me out

I'm going to have to defer to someone more familiar with the guts of bootstrap.

You should be able to use CSS to control the element's width with either a percentage, fit-content, or some other setting. None of them effect the .table-responsive except the removal of an overflow-x:auto and you only see that in products with attributes.

It is displayed in two different sizes when the item has or doesn't have attributes but I can't find what is controlling it.

360.4 x 274

360.4 x 202

gsh68:

This is a known bug - I brought it up with lat9 when having my site upgraded.
It only happens when you have an item with attributes in the cart. It is the offset of the attributes causing it on small screens.
Tested on the above site with "TEST $120 Special $90" on my old Moto E4+
Attributes cause scrolling. Non attributes don't.
Same result using Chrome emulator on pc.

Thank you for the info. For once, it is not something i messed up :-)