ZCA Bootstrap 4 Template [Support Thread]

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?

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.

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

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

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

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.

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.

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

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.

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

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/index.php?main_page=products_new also my categories such as: https://earthlywhispers.com/shop/index.php?main_page=index&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.

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/index.php?main_page=products_new also my categories such as: https://earthlywhispers.com/shop/index.php?main_page=index&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.

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! :)