ZCA Bootstrap 4 Template [Support Thread]

[lat9]

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

[gizmo_girl]

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?

[DrByte]

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

[gizmo_girl]

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.

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

[DrByte]

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;

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

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.

[gizmo_girl]

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!

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

[lat9]

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?

[Joseph M]

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:

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

above

    <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

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

[Joseph M]

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.

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:

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