ZCA Bootstrap 4 Template [Support Thread]

[turuga]

Does this template allow color changes or replacing colors with backbground images in header bars (sidebox header, main top header etc)?

[rbarbour]

Does this template allow color changes or replacing colors with backbground images in header bars (sidebox header, main top header etc)?

This template "out-of-box" inherits the Bootstrap > Utilities > Colors classes.

I include a colors stylesheet: /includes/templates/bootstrap/css/stylesheet_colors.css, which include some examples where I used colors outside the BS framework which override BS color classes.

I also added element ID's where possible due to the way BS adjoins several classes and can be frustrating when trying to override the BS classes.

So, yes, you can add color changes or replace colors with background images.

[lankeeyankee]

I created a new stylesheet called stylesheet_zcustom.css to put any modifications to the color or any other styling. This prevents losing any customization when upgrading the template.

[turuga]

I like this template very much as I find it easier customizable than responsive classic for the likes of me: changing color or background image of headers.

It seems some or one css files are called from outside website: https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css.

Perhaps at beta stage it was done so? should all css be downloaded somehwhere?
Thanks.

[rbarbour]

It seems some or one css files are called from outside website: https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css.

Perhaps at beta stage it was done so? should all css be downloaded somehwhere?
Thanks.

No, that was and is intentional...

The Bootstrap CSS framework is loaded via the BootstrapCDN, this file controls the look and feel.

Any and all CSS additions & overrides should be put in either the /includes/templates/bootstrap/css/stylesheet_colors.css or /includes/templates/bootstrap/css/stylesheet.css files or as @lankeeyankee suggested, create a new file /includes/templates/bootstrap/css/stylesheet_zcustom.css

If you choose to do a custom download of the bootstrap CSS framework, it should be called where the BootstrapCDN link is called or overrides will not be picked up.

[turuga]

Hi Rbarbour,

Is there way to change these colors or insert background image from my side? pls see the attached image. If so, how for the IT illiterate?
thank you.

[lankeeyankee]

Hi Rbarbour,

Is there way to change these colors or insert background image from my side? pls see the attached image. If so, how for the IT illiterate?
thank you.

Either edit the stylesheet_colors.css file or (in my opinion) create a new stylesheet as I mentioned in my previous post. The reason I call it stylesheet_zcustom is because anything starting with stylesheet_ is loaded on every page by zen cart's default behavior. And css cascades alphabetically so zcustom will load last and take precedence over anything else unless the class or ID is marked !important in a different sheet or is overridden by an inline style.

In your new sheet simply add .list-group-item {background-color: YOUR COLOR}

For a background image it would be .list-group-item {background-image: YOUR IMAGE; background-color: YOUR COLOR} You always want a background color in case the image becomes unavailable for some reason.

[turuga]

Thank you Lankeeyankee, i will try your suggestions.

But it seems like the shipping module does not work. I use zone rates. I use 5-6 zones. When the template is changed to responsive classic, the shipment module works, i.e. a visitor can choose country and get shipping cost estimated. But not with Bootstrap (can't choose country). Do you see the same?

[turuga]

No, that was and is intentional...

The Bootstrap CSS framework is loaded via the BootstrapCDN, this file controls the look and feel.

Any and all CSS additions & overrides should be put in either the /includes/templates/bootstrap/css/stylesheet_colors.css or /includes/templates/bootstrap/css/stylesheet.css files or as @lankeeyankee suggested, create a new file /includes/templates/bootstrap/css/stylesheet_zcustom.css

If you choose to do a custom download of the bootstrap CSS framework, it should be called where the BootstrapCDN link is called or overrides will not be picked up.

This is an amazing template. Does anybody encounter any shipping module issue? I wonder if I am an exception.

[rbarbour]

This is an amazing template. Does anybody encounter any shipping module issue? I wonder if I am an exception.

What issue are you encountering? I just activated zone rates and works fine for me.