ZCA Bootstrap 4 Template [Support Thread]

[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

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

I gave it a shot but somehow it being overwritten by another "file" named <style>

[lat9]

I gave it a shot but somehow it being overwritten by another "file" named <style>

Create (if not already present) a file in the template's /css directory named site_specific_styles.php. That CSS is loaded as the very last bit of styling, so adding the changes you want to have precedence ... will.

[dbltoe]

@nicksab

Just a reminder that the site_specific_styles.php file should have the following as a minimum:

<?php ?>
<style>
   /* Your content here ... */
</style>

Replace everything in red with your css code. With lat9's suggestion, it would look like:

<?php 
?>
<style>
   .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700; 
}
</style>