ZCA Bootstrap 4 Template [Support Thread]

I used to use the Image Handler plugin which displayed the images like this:

Attachment 20804

Additional images displayed underneath the main image. Unfortunately this plugin is not compatible with zen cart 2.1.0.
Can something similar be made with Bootstrap? or zen cart 2.1.0 in general? How are images and additional images handled? and to which directory do I upload additional images?

I found it in the stylesheet_364.css file and changed underline to none.

Quote:

---

Originally Posted by DML73

I used to use the Image Handler plugin which displayed the images like this:

Attachment 20804

Additional images displayed underneath the main image. Unfortunately this plugin is not compatible with zen cart 2.1.0.
Can something similar be made with Bootstrap? or zen cart 2.1.0 in general? How are images and additional images handled? and to which directory do I upload additional images?

---

There's a Bootstrap Configuration setting (Use Bootstrap Additional Image Carousel), which comes close. There's an "Additional Images" button which displays a modal popup carousel of images when clicked.

Thanks, I got that enabled now. Am I correct that there is no option to show the small additional images below the main image, instead of the 'Additional images' button?

Is there a setting for making the top navigation bar same width as the rest of the page?
Header Container Type, Main Content Container Type and Footer Container Type in Bootstrap Template Settings is set to 'container'.

Also, is there a setting to make the width of the whole 'container' a bit wider? (red arrow in image below)

Attachment 20805

Quote:

---

Originally Posted by DML73

Is there a setting for making the top navigation bar same width as the rest of the page?
Header Container Type, Main Content Container Type and Footer Container Type in Bootstrap Template Settings is set to 'container'.

Also, is there a setting to make the width of the whole 'container' a bit wider? (red arrow in image below)

Attachment 20805

---

Top navigation bar, hmm. A CSS setting for that doesn't currently 'pop out' at me.

For the "whole container" width, that would result in the overrides of various CSS media queries at the Bootstrap 4 breakpoints, similar to:

Code:

---

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

---

Those breakpoints and the associated default max-widths are

576px ..... 540px
768px ..... 720px
992px ..... 960px
1200px ... 1140px

P.S. Be sure to make this and other styling changes in the /css/site_specific_styles.php (rename or copy the dist.site_specific_styles.php). That'll make sure that your styling customizations survive a template upgrade more easily.

Quote:

---

Originally Posted by DML73

Thanks, I got that enabled now. Am I correct that there is no option to show the small additional images below the main image, instead of the 'Additional images' button?

---

You're correct; that'd be custom code.

Quote:

---

Originally Posted by lat9

You're correct; that'd be custom code.

---

For the additional images carousel, is it possible to change the left / right arrow?

They are barely visible in my situation. Maybe something like a white square with black chevron?

here is an example https://www.royal-fleur.com/christma...as-centerpiece

Also can the speed of the slide be increase or reduce.

Thank you

Perhaps try to add the following CSS to your stylesheet:

Code:

---

/* Change the color of Font Awesome chevron arrows */
.carousel-control-next i,
.carousel-control-prev i {
    color: #FFD700;
}

---

That would change the color to Yellow, but you can adjust the hex value to whatever desired color works best for you.

Quote:

---

Originally Posted by Jeff_Mash

Perhaps try to add the following CSS to your stylesheet:

Code:

---

/* Change the color of Font Awesome chevron arrows */
.carousel-control-next i,
.carousel-control-prev i {
    color: #FFD700;
}

---

That would change the color to Yellow, but you can adjust the hex value to whatever desired color works best for you.

---

thank you