ZCA Bootstrap 4 Template [Support Thread]

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

https://docs.zen-cart.com/user/template/other_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?

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.

.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_user_topics/browser_caching/

lat9:

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

.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_user_topics/browser_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!

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.

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

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:

.nav {
	justify-content: center;
}

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

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

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

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?

mprough:

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

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.

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;

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.

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?

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?

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:

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

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.

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