ZCA Bootstrap 4 Template [Support Thread]

[DML73]

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



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?

[enchanted1]

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

[lat9]

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



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.

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

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

[lat9]

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)

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:

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

[lat9]

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.

[nicksab]

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

[Jeff_Mash]

Perhaps try to add the following CSS to your stylesheet:

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

[nicksab]

Perhaps try to add the following CSS to your stylesheet:

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