ZCA Bootstrap 4 Template [Support Thread]

Thanks I didn't even look at that file so that could be helpful !

FYI if anyone wants to have a centerbox on login that shows their recently ordered items list that can be added to their cart instantly you can just add the sidebox code in sequence with mods desired into tpl_index_default and it will be shown or not depending on login status. Status of sidebox doesn't matter. What's most important is it doesn't impact the homepage for unique visitors as it's not visible to them.

Is there a way to have a sidebox show in mobile view?
In this particular case I'm trying to have a sidebox as a banner linking to my blog showing my holiday hours.
Using wide-banners instead isn't a great option either as the banner becomes unreadable in mobile view.

Seems strange to me that so much info that is available in pc view is deemed unnecessary in mobile views (ie currency/language selection).

gsh68:

Is there a way to have a sidebox show in mobile view?
In this particular case I'm trying to have a sidebox as a banner linking to my blog showing my holiday hours.
Using wide-banners instead isn't a great option either as the banner becomes unreadable in mobile view.

Seems strange to me that so much info that is available in pc view is deemed unnecessary in mobile views (ie currency/language selection).
You can add the sidebox link to your site's bootstrap template's /common/tpl_offcanvas_menu.php.

Hello! I just recently had version 2.0.1 installed. What code do I need to add to the stylesheet.css to remove the underlines for links? I tried adding the following but nothing changed:

a:hover {
text-decoration: none; }
}
a:active {
text-decoration: none;
}

Another question where can I alter mobile format from 1 to 2 columns to whatever above 700px so every last few years galaxy and iphone go here given they all have larger screens than when this template was created originally and then below that can be 1 column if you own a 10= year old phone and so forth as it already is for tablets and desktop? Above 992 would be the set in cofig number and so forth. AMazon does 3 column now works fine.

However if this is done then fonts need to shrink as well esp H1 which is set at 2.5rem for some reason

On mobile:

I would like to get the product listing image to be "bigger".

If you look at my site https://www.royal-fleur.com on mobile, the product image displayed in centerboxes ( featured,specials...) are around 140px x 140 px for example.
However, the product listing image in categories are displayed at 110 px x 110 px.

I feel like there is a lot space between the actual image and the product card border. How can i reducedit so the images are slightly bigger.

I find ```
.p-3 {
padding: 1rem !important;
}

but it is general and applies to other element in the page.

Any way  to achieve it  with out messing  around  the whole layout?

hope it makes sense. Thank you

Note:  product  listing image via admin control won't help. If too big, the images overlap on mobile.

How is it possible to have the productDescription text fill the full width of the page? See image. Still keeping the Add to Cart, Price and Model fields.

https://github.com/lat9/ZCA-Bootstrap-Template/issues/273

It's probably not the right way to do this, but I added:

.productDescription {width:210%}

in includes/templates/bootstrap/css/stylesheet.css

and so far it seems to work.

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?

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

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

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)

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.

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.

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/christmas/snowy-christmas-centerpiece

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

Thank you

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.

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.

thank you