ZCA Bootstrap 4 Template [Support Thread]

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.

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

nicksab:

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.

@nicksab

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

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

dbltoe:

@nicksab

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

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

ok thank you.

dbltoe:

@nicksab

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

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

umm I tried the following in site_specific_styles.php

<?php 
/*
 * BOOTSTRAP 3.6.4
 *
 * Create a file called "site_specific_styles.php" to contain any changes
 * to base css provided by this template. Place site-specific content
 * between the opening and closing style tags.
 *
 * Refer to https://github.com/lat9/ZCA-Bootstrap-Template/wiki/Frequently-Asked-Questions#applying-site-specific-styling
 * for additional information.
 */
?>
<style>
   .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700; 
}
</style>

Nothing happened and when I look at the page source, the file is not being loaded with the rest of the stylesheets.

What am I missing? site is at royal-fleur dot com for reference

thank you

I also try renaming it to royal_specific_styles.php but same results

That looks correct but I have no way of knowing if the provided CSS was correct.

If folks would follow the Posting Tips better, we can provide better help. They're there for a reason.

In this case, knowing the URL could help me see if the provided rule would actually work.

nicksab:

I also try renaming it to royal_specific_styles.php but same results

this will not work.

nicksab:

umm I tried the following in site_specific_styles.php

> 
> Nothing happened and when I look  at  the page source, the file is not being loaded with the rest of the stylesheets.
> 
> What am I missing?  site is at  royal-fleur dot com for reference
> 
> thank you

assuming your royal_fleur template is a clone of bootstrip the file should be here:

<https://www.royal-fleur.com/includes/templates/royal_fleur/css/site_specific_styles.php>

but alas it is not.  so if you are putting that file in the correct position, then it is a permissions issue.  as i am not seeing the file there, then it is one of those things:  wrong position or wrong permissions. 

if you solve that and it is still not working, i would examine [this section of code](https://github.com/lat9/ZCA-Bootstrap-Template/blob/bc632e533527d465919a0469c2e24be27a0b5321/includes/templates/bootstrap/common/html_header.php#L175-L180) to ensure you have it in your template:

best.

carlwhat:

this will not work.

assuming your royal_fleur template is a clone of bootstrip the file should be here:

https://www.royal-fleur.com/includes/templates/royal_fleur/css/site_specific_styles.php

but alas it is not. so if you are putting that file in the correct position, then it is a permissions issue. as i am not seeing the file there, then it is one of those things: wrong position or wrong permissions.

if you solve that and it is still not working, i would examine this section of code to ensure you have it in your template:

best.

thank you.

my apologies to all. I thought I was suppose to rename the file dist-site_specific_styles.php . Woops.

I made the changes in site_specific_styles.php afret remove "dist-" from the file name and added to my templates css file.

It seems working now ( after clearing my cache for the hundreds time)

Thanks again

In tpl_product_info_display.php I see the if

$display_price_top === true
$display_price_bottom === true

On the product page I see the latter one (inspecting the page I see id="productsPriceBottom-productPriceBottomPrice" class="productPriceBottomPrice")

I suppose there is a setting somewhere for it, but can't find it, what am I missing?

I can edit the template file to my likes, just curious to understand the functioning of it.

keneso:

In tpl_product_info_display.php I see the if

$display_price_top === true
$display_price_bottom === true

On the product page I see the latter one (inspecting the page I see id="productsPriceBottom-productPriceBottomPrice" class="productPriceBottomPrice")

I suppose there is a setting somewhere for it, but can't find it, what am I missing?

I can edit the template file to my likes, just curious to understand the functioning of it.
See Configuration / Bootstrap Template Settings / Product Info Pricing Location. It can be one of Both, Above Only or Below Only.

lat9:

See Configuration / Bootstrap Template Settings / Product Info Pricing Location. It can be one of Both, Above Only or Below Only.

Speechless!
You wouldn't believe how many times I looked there, and managed to miss it.

I am aware it is a wierd suggestion/request, but would you consider adding the option of disabling both; like said I can edit the template file, so no big deal, just a thought.

keneso:

Speechless!
You wouldn't believe how many times I looked there, and managed to miss it.

I am aware it is a wierd suggestion/request, but would you consider adding the option of disabling both; like said I can edit the template file, so no big deal, just a thought.
You can set that setting to be Below Only and then add the following to your site_specific_styles.php

#productsPriceBottom-card {display: none;}

Yes, done it already.

Questions in regards to the banner carousel (mostly on the index page)

What changes would be needed in order to "lazy" load the banner image?

Disregards my question if the images are already lazy or defer loaded. I just didn't see any reference to it

Thank you

Not convinced this issue is template related as it is occurring across the default templates as well, but I'm experiencing issues getting the medium and large product images to display. I have uploaded images for product A as follows:

/images/products/categoryA/productA.png
/images/products/categoryA/productA_01.png
/images/medium/products/categoryA/productA_MED.png
/images/large/products/categoryA/productA_LRG.png
/images/large/products/categoryA/productA_01_LRG.png

The original product image and additional image displays properly on the product info page (but only at the smaller size). It does not appear to be loading the medium or large images. Any ideas on what I might be doing wrong? I do not have any image plugins installed, and using the bootstrap template with modal images. Confirmed the suffix for _MED and _LRG matches the config settings in admin.

Thanks in advance!

mcqueeneycoins:

Not convinced this issue is template related as it is occurring across the default templates as well, but I'm experiencing issues getting the medium and large product images to display. I have uploaded images for product A as follows:

/images/products/categoryA/productA.png
/images/products/categoryA/productA_01.png
/images/medium/products/categoryA/productA_MED.png
/images/large/products/categoryA/productA_LRG.png
/images/large/products/categoryA/productA_01_LRG.png

The original product image and additional image displays properly on the product info page (but only at the smaller size). It does not appear to be loading the medium or large images. Any ideas on what I might be doing wrong? I do not have any image plugins installed, and using the bootstrap template with modal images. Confirmed the suffix for _MED and _LRG matches the config settings in admin.

Thanks in advance!
If it's happening with the default templates as well, it's a base Zen Cart issue.

lat9:

If it's happening with the default templates as well, it's a base Zen Cart issue.

I narrowed down the issue to the folder structure. When I upload the images via admin product page, there is no subfolder dropdown to select so I was manually adding the path for the image (../images/products/categoryA/filename.png. That works, which is why the main image loaded, but the med and lrg files didn't. I think zencart was looking for the file path I entered as a subdirectory and/or was causing it to look in the wrong place. I ended up just moving everything to a single subfolder (rather than the multi-level) structure I had, and everything working well so far. If you have suggestions on how to add the extra sub-level without messing up the MED and LRG paths I'd still love to solve the problem.

mcqueeneycoins:

I narrowed down the issue to the folder structure. When I upload the images via admin product page, there is no subfolder dropdown to select so I was manually adding the path for the image (../images/products/categoryA/filename.png. That works, which is why the main image loaded, but the med and lrg files didn't. I think zencart was looking for the file path I entered as a subdirectory and/or was causing it to look in the wrong place. I ended up just moving everything to a single subfolder (rather than the multi-level) structure I had, and everything working well so far. If you have suggestions on how to add the extra sub-level without messing up the MED and LRG paths I'd still love to solve the problem.
Thanks for the update. The base (and most templates') code is expecting the images to be in the /images directory.

If you're hand-entering the name of the image, you'd enter it as products/categoryA/filename.png

Zen Cart 2.0.1
PHP 8.3.14
Bootstrap 3.7.2-beta5
No other plugins

The listingDisplayOrderSorter with recommended, product name etc is only configurable via a file edit? Just making sure, I found no admin side config for it.

~Melanie