ZCA Bootstrap 4 Template [Support Thread]

While the "Listing Layout Style" is not used by the Bootstrap template, the "Columns per Row" setting is -- use 0 for fluid columns or 1 for rows. Other results can display in an unwanted manner; see this Wiki article for more information: https://github.com/lat9/ZCA-Bootstra...play-anomalies

How would I change a color to a gradient? I thought I could just enter

Code:

---

linear-gradient(to bottom right, #33ccff 0%, #3366ff 100%)

---

in the color tool but that does not work.

gradiants and colors are different. A background color is coded differently than a plain background which can be an image, gradiant or other entity.

You can use rgba and other forms of opacity in the bootstrap colors.

I am trying to do some modifications to this template using site_specific_styles.php. I just tried to do something simple like change a text color but nothing is changing. What am I missing here? I have been reading heavily into BS4 and CSS but I am just a hack on this side.

Code:

---

<style>
  #tagline {
  color: yellow;
}
</style>

---

Quote:

---

Originally Posted by g2ktcf

I am trying to do some modifications to this template using site_specific_styles.php. I just tried to do something simple like change a text color but nothing is changing. What am I missing here? I have been reading heavily into BS4 and CSS but I am just a hack on this side.

Code:

---

<style>
  #tagline {
  color: yellow;
}
</style>

---

---

That's weird, since placing that CSS in that file should work. Are you sure the file's in the site's "clone" of the template instead of the /templates/bootstrap/css directory?

v3.6.4 of the ZCA Bootstrap Template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes required for interoperability with Zen Cart v2.0.0 and bugfixes.

For a full list of all changes, see this link: https://github.com/lat9/ZCA-Bootstra...stone%3Av3.6.4

Quote:

---

Originally Posted by lat9

That's weird, since placing that CSS in that file should work. Are you sure the file's in the site's "clone" of the template instead of the /templates/bootstrap/css directory?

---

Yes, I just checked not only that but verified that the clone was actually the selected template. Do you have a suggestion on what else to put in there as a test?

Quote:

---

Originally Posted by lat9

That's weird, since placing that CSS in that file should work. Are you sure the file's in the site's "clone" of the template instead of the /templates/bootstrap/css directory?

---

Found it....I forgot to remove dist- from the file name. I just took a chance and that did it! I feel like such an idiot! lol

Hi All,

Server Host: xxxxx.prod.phx3.secureserver.net (68.178.132.xxx)
Database: xxxxx_live158Store
Home: /home/xxxxx/public_html/Server
OS: Linux 4.18.0-477.27.2.lve.el8.x86_64
Server Date: 24/11/2023 22:50:21
Server Up Time: Disabled/UnavailableHTTP
Server: ApachePHP Version: 8.0.30 (Zend: 4.0.30)PHP
File Uploads: OnUpload Max Size: 1024M
PHP Memory Limit: -1POST Max Size: 1024M
Database Engine: MySQL 10.6.14-MariaDB-cll-lve
Database Host: localhost (127.0.0.1)
Database Date: 24/11/2023 22:50:21
Database Data Size: 280,607 kB
Database Index Size: 40,767 kB
MySQL Slow Query Log Status: Off
MySQL Slow Query Log File: xxxxx-slow.log
MySQL Mode: NO_ENGINE_SUBSTITUTIONView the database configuration variables

I need help on how I move the search from the top right to the right side where the logo is below the contact number.

We are using the latest version of the bootstrap template version 3.6.3. This is the site outdoorking.com.au

Any assistance with code and where to put it would be appreciated, as I am consistently getting people not knowing where they can search on the website.

I would like to have a box saying enter part number or description so they can at lest see it.

Go to Configuration :: Bootstrap Template Settings and set Enable AJAX Search to false. That'll cause a full search button/input field to be displayed instead of the search-icon.

Note, too, that v3.6.3 is not the latest; v3.6.4 was released a couple of days ago!

Quote:

---

Originally Posted by lat9

Go to Configuration :: Bootstrap Template Settings and set Enable AJAX Search to false. That'll cause a full search button/input field to be displayed instead of the search-icon.

Note, too, that v3.6.3 is not the latest; v3.6.4 was released a couple of days ago!

---

That worked but now the display below does not show the products. So how do you fix that issue. The box used to pop up on the screen and a drop down would show products image etc.

Quote:

---

Originally Posted by Bruce1952

That worked but now the display below does not show the products. So how do you fix that issue. The box used to pop up on the screen and a drop down would show products image etc.

---

So, you've got a "partial whitepage". There's a myDEBUG*.log file in the site's /logs directory that you could post-back.

Quote:

---

Originally Posted by lat9

So, you've got a "partial whitepage". There's a myDEBUG*.log file in the site's /logs directory that you could post-back.

---

I will try to explain a bit better so we are on the same page.

1. The magnifying glass top right next to phone number (people her don't look very hard) they don't see it.

2. When you press it a box pops up where you can place a part number or description into it and images show below the box(which it is doing correctly)

3. I want the box to be in the same area as the logo but under the phone number so people can see it when on the site because it would be more visible than the magnifying glass (which is not that big).

4. I am dealing with people that I think might be blind because I have to keep explaining to them that they have to look.

I hope that I have explained it correctly so you can understand what I am trying to achieve.

I've thought about this change (but for other reasons) for my shop which is using responsive_classic, too.

You probably might to edit the template file to achieve that. At responsive_classic it should be near round by "logowrapper". Though I have installed the Bootstrap Template on a dev subdomain I haven't been able to try it out.

Be careful not to break mobile display.

Flexbox should do the trick. If not flexbox then css-grid will.
Bootstrap probably has anything already built-in?! If not just edit it in your stylesheet accordingly.

Quote:

---

Originally Posted by Bruce1952

I will try to explain a bit better so we are on the same page.

1. The magnifying glass top right next to phone number (people her don't look very hard) they don't see it.

---

Do they also not see the big SEARCH sidebox that is already underneath your logo in the left-hand sidebox menu?

Quote:

---

2. When you press it a box pops up where you can place a part number or description into it and images show below the box(which it is doing correctly)

3. I want the box to be in the same area as the logo but under the phone number so people can see it when on the site because it would be more visible than the magnifying glass (which is not that big).

---

It almost sounds like you want the AJAX features (of having pop-ups when you click the search and instant results), but you want the look and appearance of the non-AJAX search (which shows the Search Box by default to type into).

Personally on my site, I turned OFF the AJAX search because I like the longer search box in the header bar versus the small magnifying glass.

Quote:

---

4. I am dealing with people that I think might be blind because I have to keep explaining to them that they have to look.

---

You can only hold their hand so much. I'd say to turn off AJAX search (which will make the search bar more visible in the header menu), and still leave the Search Box in the upper left hand sidebox. Between those two things, if your customers can't figure out how to search for something, then they should just call you on the phone because internet shopping is not for them.

I need to format the tagline for my site in a very specific font. I have both ttf and woff2 files. I created the following

Code:

---

@font-face {
font-family: "TagLine_font";
src: url("../fonts/myfont.ttf") format("truetype");
src: url("../fonts/myfont.woff2") format("woff2"),

}

---

The other fonts found in 158a are in an admin directory but I am not sure WHERE to put the two files or exactly how to reference the path within ZC. I am getting a 404 file not found which is logical given that its looking at "localwlc.com/fonts/myfont.woff2"

Where do these file need to go and how to I reference them properly?

Thanks
Chris

You could stick to the method how Font Awesome is being stored and referenced to.
Though I put new fonts in a new directory called /fonts.

please ignore

Quote:

---

Originally Posted by g2ktcf

I need to format the tagline for my site in a very specific font. I have both ttf and woff2 files. I created the following

Code:

---

@font-face {
font-family: "TagLine_font";
src: url("../fonts/myfont.ttf") format("truetype");
src: url("../fonts/myfont.woff2") format("woff2"),

}

---

The other fonts found in 158a are in an admin directory but I am not sure WHERE to put the two files or exactly how to reference the path within ZC. I am getting a 404 file not found which is logical given that its looking at "localwlc.com/fonts/myfont.woff2"

Where do these file need to go and how to I reference them properly?

Thanks
Chris

---

This is my setup,

put your code in a new file - \includes\templates\YOUR_TEMPLATE\css\stylesheet_font.css, note the path change of 'src: url' and either remove the trailing comma (in red) or change it to a semi-colon.

Code:

---

@font-face {
font-family: "TagLine_font";
src: url("/fonts/myfont.ttf") format("truetype");
src: url("/fonts/myfont.woff2") format("woff2"),

}

---

add an index.html file to the /fonts folder

index.html

Code:

---

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
  </head>
  <body></body>
</html>

---

to restrict access to certain filetypes (i.e. fonts) add an .htaccess file to the /fonts folder (you might need to copy over an existing one from another folder and edit it - in windows you cannot create a new file beginning with a dot)

.htaccess

Code:

---

#
# @copyright Copyright 2003-2013 Zen Cart Development Team
# @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
# @version GIT: $Id: Author: DrByte  Fri May 17 14:29:18 2013 -0400 Modified in v1.5.2 $
#
# This is used with Apache WebServers
#
# The following blocks direct HTTP requests to all filetypes in this directory recursively, except certain approved exceptions
# It also prevents the ability of any scripts to run. No type of script, be it PHP, PERL or whatever, can normally be executed if ExecCGI is disabled.
# Will also prevent people from seeing what is in the dir. and any sub-directories
#
# For this to work, you must include either 'All' or at least: 'Limit' and 'Indexes' parameters to the AllowOverride configuration in your apache/conf/httpd.conf file.
# Additionally, if you want the added protection offered by the OPTIONS directive below, you'll need to add 'Options' to the AllowOverride list, if 'All' is not specified.
# Example:
#<Directory "/usr/local/apache/htdocs">
#  AllowOverride Limit Options Indexes
#</Directory>
###############################

# deny *everything*
<FilesMatch ".*">
  <IfModule mod_authz_core.c>
    Require all denied
  </IfModule>
  <IfModule !mod_authz_core.c>
    Order Allow,Deny
    Deny from all
  </IfModule>
</FilesMatch>

# but now allow just *certain* necessary files:
<FilesMatch "(?i).*\.(otf|ttf|woff|woff2|eot|svg)$" >
  <IfModule mod_authz_core.c>
    Require all granted
  </IfModule>
  <IfModule !mod_authz_core.c>
    Order Allow,Deny
    Allow from all
  </IfModule>
</FilesMatch>

IndexIgnore */*


## NOTE: If you want even greater security to prevent hackers from running scripts in this folder, uncomment the following line (if your hosting company will allow you to use OPTIONS):
# OPTIONS -Indexes -ExecCGI

---

>Personally on my site, I turned OFF the AJAX search because I like the longer search box in the header bar versus the small magnifying glass.

Likewise, everything has to be blindingly obvious for the densest customer. I don't like the modal but want an ajax search.

I made a half-hearted attempt to modify the BS4 code to use the default search field, but gave up and used the instant search instead:

https://github.com/marco-pm/zencart_instantsearch

ZenCart v158a
OPC v2.5
ZCA Bootstrap v3.6.4
PHP 7.4 / 8.1

Building a fresh new site for a customer, currently running a non-Bootstrap site.

Question:
I need to change some colors to get the look of customer's present site.
May I change some colors using the admin's ZCA Bootstrap Colors tool, including those values now set to "not-set"?

TIA,

jpda

Quote:

---

Originally Posted by jpda

ZenCart v158a
OPC v2.5
ZCA Bootstrap v3.6.4
PHP 7.4 / 8.1

Building a fresh new site for a customer, currently running a non-Bootstrap site.

Question:
I need to change some colors to get the look of customer's present site.
May I change some colors using the admin's ZCA Bootstrap Colors tool, including those values now set to "not-set"?

TIA,

jpda

---

Absolutely. Those 'not-set' values are recent additions and are initially "set" to that value so that a template upgrade doesn't affect the site.

@lat9

Thank you! :smile:

Quote:

---

Originally Posted by simon1066

This is my setup,

put your code in a new file - \includes\templates\YOUR_TEMPLATE\css\stylesheet_font.css, note the path change of 'src: url' and either remove the trailing comma (in red) or change it to a semi-colon.

Code:

---

@font-face {
font-family: "TagLine_font";
src: url("/fonts/myfont.ttf") format("truetype");
src: url("/fonts/myfont.woff2") format("woff2"),

}

---

add an index.html file to the /fonts folder

index.html

Code:

---

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
  </head>
  <body></body>
</html>

---

to restrict access to certain filetypes (i.e. fonts) add an .htaccess file to the /fonts folder (you might need to copy over an existing one from another folder and edit it - in windows you cannot create a new file beginning with a dot)

.htaccess

Code:

---

#
# @copyright Copyright 2003-2013 Zen Cart Development Team
# @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
# @version GIT: $Id: Author: DrByte  Fri May 17 14:29:18 2013 -0400 Modified in v1.5.2 $
#
# This is used with Apache WebServers
#
# The following blocks direct HTTP requests to all filetypes in this directory recursively, except certain approved exceptions
# It also prevents the ability of any scripts to run. No type of script, be it PHP, PERL or whatever, can normally be executed if ExecCGI is disabled.
# Will also prevent people from seeing what is in the dir. and any sub-directories
#
# For this to work, you must include either 'All' or at least: 'Limit' and 'Indexes' parameters to the AllowOverride configuration in your apache/conf/httpd.conf file.
# Additionally, if you want the added protection offered by the OPTIONS directive below, you'll need to add 'Options' to the AllowOverride list, if 'All' is not specified.
# Example:
#<Directory "/usr/local/apache/htdocs">
#  AllowOverride Limit Options Indexes
#</Directory>
###############################

# deny *everything*
<FilesMatch ".*">
  <IfModule mod_authz_core.c>
    Require all denied
  </IfModule>
  <IfModule !mod_authz_core.c>
    Order Allow,Deny
    Deny from all
  </IfModule>
</FilesMatch>

# but now allow just *certain* necessary files:
<FilesMatch "(?i).*\.(otf|ttf|woff|woff2|eot|svg)$" >
  <IfModule mod_authz_core.c>
    Require all granted
  </IfModule>
  <IfModule !mod_authz_core.c>
    Order Allow,Deny
    Allow from all
  </IfModule>
</FilesMatch>

IndexIgnore */*


## NOTE: If you want even greater security to prevent hackers from running scripts in this folder, uncomment the following line (if your hosting company will allow you to use OPTIONS):
# OPTIONS -Indexes -ExecCGI

---

---

Thanks Simon! I got this to work on my first try. Thank you for all the specific detail. The only thing I did differently is I already have a site specific style page mentioned a few posts back. Having all my "tweaks" in one page is really nice!

Hi Guys,
After updating to ZCA Bootstrap v3.6.4 on Zencart 1.5.7d PHP 7.4 the Shopping cart shows a blank page after trying to add a product and the following error appears in the logs. Is it a file missing or some incompatibility with PHP and 1.5.7?

[29-Mar-2024 15:43:32 UTC] Request URI: /index.php?main_page=shopping_cart, IP address: -------
#1 require() called at [/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php:17]
#2 require(/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php) called at [/includes/templates/bootstrap/common/html_header.php:224]
#3 require(/includes/templates/bootstrap/common/html_header.php) called at [/index.php:42]
--> PHP Warning: require(includes/templates/template_default/jscript/zen_addr_pulldowns.php): failed to open stream: No such file or directory in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17.

[29-Mar-2024 15:43:32 UTC] PHP Fatal error: require(): Failed opening required 'includes/templates/template_default/jscript/zen_addr_pulldowns.php' (include_path='.:/Applications/PHP7/lib/php') in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17

Hi @lat9 after updating to 3.6.4 on zencart 1.5.7d and php 7.4 the shopping cart goes blank after trying to add a product. The error in the log is shown below. Any hints are welcome.

[29-Mar-2024 15:43:32 UTC] Request URI: /index.php?main_page=shopping_cart, IP address: ------
#1 require() called at [/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php:17]
#2 require(/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php) called at [/includes/templates/bootstrap/common/html_header.php:224]
#3 require(/includes/templates/bootstrap/common/html_header.php) called at [/index.php:42]
--> PHP Warning: require(includes/templates/template_default/jscript/zen_addr_pulldowns.php): failed to open stream: No such file or directory in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17.

[29-Mar-2024 15:43:32 UTC] PHP Fatal error: require(): Failed opening required 'includes/templates/template_default/jscript/zen_addr_pulldowns.php' (include_path='.:/Applications/PHP7/lib/php') in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17

Quote:

---

Originally Posted by Georgecy

Hi @lat9 after updating to 3.6.4 on zencart 1.5.7d and php 7.4 the shopping cart goes blank after trying to add a product. The error in the log is shown below. Any hints are welcome.

[29-Mar-2024 15:43:32 UTC] Request URI: /index.php?main_page=shopping_cart, IP address: ------
#1 require() called at [/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php:17]
#2 require(/includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php) called at [/includes/templates/bootstrap/common/html_header.php:224]
#3 require(/includes/templates/bootstrap/common/html_header.php) called at [/index.php:42]
--> PHP Warning: require(includes/templates/template_default/jscript/zen_addr_pulldowns.php): failed to open stream: No such file or directory in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17.

[29-Mar-2024 15:43:32 UTC] PHP Fatal error: require(): Failed opening required 'includes/templates/template_default/jscript/zen_addr_pulldowns.php' (include_path='.:/Applications/PHP7/lib/php') in /includes/modules/pages/shopping_cart/jscript_addr_pulldowns_bootstrap.php on line 17

---

Sigh, that's why I'm continuing to drop support of various Zen Cart versions prior to 1.5.8 ... too many differences. I'll get that corrected for the forthcoming v3.6.5 of the template.

Quote:

---

Originally Posted by lat9

Sigh, that's why I'm continuing to drop support of various Zen Cart versions prior to 1.5.8 ... too many differences. I'll get that corrected for the forthcoming v3.6.5 of the template.

---

Actually, something's not quite right with your installation. Line 17 of jscript_addr_pulldowns_zca_bootstrap.php for v3.6.4 is a comment. Did you perhaps forget to copy that file?

Quote:

---

Originally Posted by lat9

Sigh, that's why I'm continuing to drop support of various Zen Cart versions prior to 1.5.8 ... too many differences. I'll get that corrected for the forthcoming v3.6.5 of the template.

---

Hi Cindy,
I checked the installation many times and is ok. Based on your response I suspected that the file missing (zen_addr_pulldowns.php) was probably from ZC 1.5.8 and searching in 1.5.8 I found it and copied in 1.5.7d. Even though as a first test now it works, please let me know if this will cause any issues in the 1.5.7. Thanks a lot.

On ZC 1.5.7d with Boostrap 3.6.4 the categories and product names, Titles and all LINKS are all underlined. On mouse hover the undeline goes away. The behavior is exactly the opposite than expected. I looked for Text-Decoration in stylesheets. But I had no effect when changing the parameters. Any advise of what may be causing it is appreciated.

/**
* "Cache-busting" stylesheet for Bootstrap v3.6.4
*/
a {
text-decoration: underline;
}

@GeorgeCY, I am not a fan of the display either; it was introduced in response to this GitHub issue: https://github.com/lat9/ZCA-Bootstra...ate/issues/324

By removing /css/stylesheet_364.css from the site, you can restore the display to the previous versions'.

Quote:

---

Originally Posted by lat9

@GeorgeCY, I am not a fan of the display either; it was introduced in response to this GitHub issue: https://github.com/lat9/ZCA-Bootstra...ate/issues/324

By removing /css/stylesheet_364.css from the site, you can restore the display to the previous versions'.

---

Or, possibly better, create the file /css/stylesheet_364a.css in your bootstrap clone's /templates directory containing

Code:

---

#categoriesContent a {
    text-decoration: none;
}

---

That'll keep the overall 'underline' on links except for the links in the categories' sidebox.

russianradiantsaDOTcom
ZC 1.5.8a
PHP 7.4.33
bootstrap 3.6.4
OPC
EO
DBIO
Options' Stock Manager

All mods are current from forum Plugins not Github

Don't think this is a boostrap problem but bootstrap and MagicThumb are not doing well together. I have removed MagicThumb for now.

This site if fed by an Excel file from the manufacture with generally four to five images of each product. The original is in the format XXXX####.jpg where XXXX is the product code and #### is the model number. The additional images are in the format XXXX####_L.jpg where L is a through c or d depending on whether there are four or five total images.

Zen Cart has no problem with properly labeling and showing the images as set witht the original as the main images and the underscores as additionals with their L in alphabetical order as expected.

The problem lies in that Zen Cart is overzealous in trying to select images for a product.

If you go to the site and search for 11, you will be shown eight items with 11 in the model number.

Clicking on the first available, results in the product page for STTK110. HOWEVER, the first set of additional images for the item are for STTK1100. It also shows images for 1101 thru 1109.

The selection is basing the results on 110 being anywhere in the image's filename. Since it is NOT showing images for 1110, we can assume (I know) that it looks at the images from the front of the image name until the first character/number does not match.

That is reinforced by the fact that, when selecting the second choice of STK1100, it results in a proper product listing of only the images matching sttk1100.jpg or sttk1100_L.jpg.

I have not experienced this before as we have been using responsive_classic with MagicThumb (a commercial image handler). It's selection proces works with responsive_classic but not with bootstrap.

I am hoping to find a way to modify the selection process to more correctly select images for a product. With over 2,000 products in a feed, it is impossible to try to manipulate image naming so that products starting with 11, 12, 13, 14, 15, 16, 17, 18, 19, and 20 would not show images not related to them.

Is it a simplle matter of having the search only look for a strict match from the filename beginning to the . or _?

Is there a change to the #image_modal that could accomplish this or is in the main zen_image? Perhaps a change in the includes/functions/htim_output.com?

Suggestions?

Quote:

---

Originally Posted by lat9

@GeorgeCY, I am not a fan of the display either; it was introduced in response to this GitHub issue: https://github.com/lat9/ZCA-Bootstra...ate/issues/324

By removing /css/stylesheet_364.css from the site, you can restore the display to the previous versions'.

---

Sorry for being late to the party.

Even ADA and WCAG recognize the underlining links is "old school" but, both will balk at removing the underline UNLESS:

Quote:

---

The Web Content Accessibility Guidelines (WCAG) 2.0 has requirements for links that use color to distinguish them from surrounding text. The links must have a contrast ratio of at least 3:1 between the link and the surrounding text, and some additional visual cue when the link is hovered or receives focus. This visual cue can be an underline, bold, italic, or increase in font size. The underline should always be persistent, not solely on hover.

---

Notice that it does not address cursor change as a valid visual cue. Also, I'm surprised that they do list increased font size as this can create a hazardous blinking hazard.

That said, the problem is, for example, if you have the Categories and Reviews sideboxes on the same page, you will need to do some fancy colorizing to let the customers know that the Reviews heading is a link since both are set to the same coloring in the bootstrap distro.

It's easy to have all a:hover actions have the underline decoration triggered. The problem lies in the inclusion of mobile devices into the overall picture. While the mobile device can react to focus with proper textg decoration of a link, it can't react to hover.

If you want desktop to play without, and mobile to play with, text-decoration_underline, you would need to add a mobile-specific styleheet.

Code:

---

/* For devices with max-width of 768px (tablets and below) */@media only screen and (max-width: 768px) {
  /* Apply underline to the text */
  .your-element {
    text-decoration: underline;
  }
}


/* For devices with max-width of 480px (most smartphones) */
@media only screen and (max-width: 480px) {
  /* Apply underline to the text */
  .your-element {
    text-decoration: underline;
  }
}

---

Replace .your-element with the appropriate selector for the element you want to apply the underline to. This CSS will apply the underline only on devices with a screen width of 768 pixels or less (typically tablets and below) and 480 pixels or less (typically smartphones. Adjust as needed.

Remember that you will need to make the desktop compliant first.

Downloaded the latest ZCA-Bootstrap-Template-3.6.4.
The language file "\includes\languages\english\bootstrap\lang.account_history_info.php" contains the following text:

Code:

---

$define = [
    'TEXT_MISSING_SHIPPING_INFO' => 'WARNING: missing shipping details',
];

---

Is that correct??:dontgetit

Quote:

---

Originally Posted by jpda

Downloaded the latest ZCA-Bootstrap-Template-3.6.4.
The language file "\includes\languages\english\bootstrap\lang.account_history_info.php" contains the following text:

Code:

---

$define = [
    'TEXT_MISSING_SHIPPING_INFO' => 'WARNING: missing shipping details',
];

---

Is that correct??:dontgetit

---

Yes, that was introduced post-zc158 release.

Quote:

---

Originally Posted by lat9

Yes, that was introduced post-zc158 release.

---

Thank you!

I am on zc158a, so I don't need it?

jpda

Quote:

---

Originally Posted by jpda

Thank you!

I am on zc158a, so I don't need it?

jpda

---

My bad, added post zc158a, present in zc200. So, yes you do need that definition.

Thanks again! :smile:

jpda

I understand a multilevel dropdown (with flyout submenus) is not a standard feature of Bootstrap, so there seem to be a lot of third party alternatives.
Any recommendations?

Quote:

---

Originally Posted by torvista

I understand a multilevel dropdown (with flyout submenus) is not a standard feature of Bootstrap, so there seem to be a lot of third party alternatives.
Any recommendations?

---

A link to an example of what you're looking for would be appreciated.

E.g.
Attachment 20587

Quote:

---

Originally Posted by g2ktcf

How would I change a color to a gradient?

---

This might help. I wanted to do this for the sidebox and centerbox headers as well as the top nav, so I edited includes/templates/bootstrap/css/site_specific_styles.php and added:

.leftBoxHeading, .centerBoxHeading, #navMain > nav {
color: black;
background-image: linear-gradient(my parameters);
}

As @dbltoe noted, only hex color codes may be entered in the Admin tool.

Quote:

---

Originally Posted by dbltoe

gradiants and colors are different. A background color is coded differently than a plain background which can be an image, gradiant or other entity.

You can use rgba and other forms of opacity in the bootstrap colors.

---

It's not limited to just hex.

Right-clicking will show many things you can do with the color listing. RGB, RGBa, Hexadecimal, and HSL

Still, color is a singular product show you will need to use the site-specific CSS for gradients.

Yes - "limited to color codes" would have been better. Fixed.

Quote:

---

Originally Posted by swguy

This might help. I wanted to do this for the sidebox and centerbox headers as well as the top nav, so I edited includes/templates/bootstrap/css/site_specific_styles.php and added:

.leftBoxHeading, .centerBoxHeading, #navMain > nav {
color: black;
background-image: linear-gradient(my parameters);
}

As @dbltoe noted, only hex color codes may be entered in the Admin tool.

---

Yep, I did that a while back. I really like the site specific styling page. I can sit and make all kinds of tweaks all in one place. I just park the chrome developer console off the sided and play! :D

With bootstrap, it's always a good idea to see what is already out there when wanting to do something like this. Bootstrap has a lot of features that can easily be used.

https://higuma.github.io/bootstrap-4...nt+shadow.html is an example of what can be done with existing gradients in bootstrap 4 and the bg-gradient-xxxxxx class. It gets deep but is a thorough cover of the topic.


You could create a rule in the site-specific something like

Code:

---

.myGradient {color: #721c24;
    background: #f8d7da linear-gradient(180deg,#f9dde0,#f8d7da) repeat-x;
    border-color: #f5c6cb;
}

---

Then add it to the items that you want to have that gradient.

It might be easier to use several different div's and classes instead of the .myGradient.

Code:

---

.leftBoxHeading, .centerBoxHeading, #navMain {    color: #721c24;
    background: #f8d7da linear-gradient(180deg,#f9dde0,#f8d7da) repeat-x;
    border-color: #f5c6cb;
}

---

This saves having to tooch a bunch of core files.

Still there is the option of having several gradients and just adding the class/div to a particular item.

Quote:

---

Originally Posted by g2ktcf

Yep, I did that a while back. I really like the site specific styling page. I can sit and make all kinds of tweaks all in one place. I just park the chrome developer console off the sided and play! :D

---

Glad to hear you are having success!

I am not sure this is a bootstrap issue. But I have two full sets of Category boxes showing in the left side box one on top of the other. It is a complete duplicate but I cannot see where this is coming from?

Latest edition of Bootstrap, ZC 2.0, IH, Clone a Template is all I have installed at this point on a local XAMPP server.

Quote:

---

Originally Posted by g2ktcf

I am not sure this is a bootstrap issue. But I have two full sets of Category boxes showing in the left side box one on top of the other. It is a complete duplicate but I cannot see where this is coming from?

Latest edition of Bootstrap, ZC 2.0, IH, Clone a Template is all I have installed at this point on a local XAMPP server.

---

What shows (i.e. a screenshot) in the admin's Tools :: Layout Boxes Controller?

Quote:

---

Originally Posted by lat9

What shows (i.e. a screenshot) in the admin's Tools :: Layout Boxes Controller?

---

hm....there are TWO entries for every value? I know I had db issues before and I had to restore the db but this is weird.Attachment 20593

v3.6.5 of the Bootstrap template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes associated with the following GitHub issues:

#342: Preserve listing filters in listings' display-order form.
#344: Correct "Missing constant" logs for zc158 on the products_all page.
#343: Add display-order selection for products' and specials' listings (zc200 or later, only).
#349: Use zen_get_products_name to display products' names in listings.
#345: Correct products' table formatting on the AJAX checkout_payment page.
#352: Change products items title from heading to paragraph for accessibility.
#353: Enable the zca_splitPageResults class to be overridden.
#355: Provide title HTML attributes on header-navigation links.
#356: Always display the "Home" link in the header; ensure header-messages are displayed even if the header is disabled.

zc158a
Bootstrap v3.6.4
OPC v2.5.1

I am upgrading ZCA v3.6.4 to v3.6.5

I can't find the file "/includes/languages/english/bootstrap/extra_definitions/lang.zca_bootstrap_common.php"

Should it be "/includes/languages/english/extra_definitions/bootstrap/lang.zca_bootstrap_common.php" ?

TIA,

jpda

Nearly it is in "/includes/languages/english/bootstrap/extra_definitions/bootstrap/lang.zca_bootstrap_common.php"

Quote:

---

Originally Posted by brittainmark

Nearly it is in "/includes/languages/english/bootstrap/extra_definitions/bootstrap/lang.zca_bootstrap_common.php"

---

Thanks, but the v3.6.5 distribution /includes/languages/english/bootstrap/ only contains lang.account_history_info.php and account_history_info.php.
And /includes/languages/english/ contains two folders: bootstrap & extra_definitions.
The latter folder contains the file /lang.zca_bootstrap_common.php.

jpda

Quote:

---

Originally Posted by jpda

zc158a
Bootstrap v3.6.4
OPC v2.5.1

I am upgrading ZCA v3.6.4 to v3.6.5

I can't find the file "/includes/languages/english/bootstrap/extra_definitions/lang.zca_bootstrap_common.php"

Should it be "/includes/languages/english/extra_definitions/bootstrap/lang.zca_bootstrap_common.php" ?

TIA,

jpda

---

Quote:

---

Originally Posted by brittainmark

Nearly it is in "/includes/languages/english/bootstrap/extra_definitions/bootstrap/lang.zca_bootstrap_common.php"

---

Crud, the readme.html is wrong. The language files for the template are in either

/includes/languages/english/bootstrap/lang.*.php
/includes/languages/english/extra_definitions/bootstrap/lang.*.php

... except for the zca_bootstrap_id.php (no lang. prefix), which is present in the ..../extra_definitions/bootstrap sub-directory.

Thanks for your confirmation Cindy!:smile:

jpda

FWIW, I've corrected that readme on the GitHub repository; viewable here: https://htmlpreview.github.io/?https...ap/readme.html

Version 3.4.0 (and perhaps earlier) has a small bug that the checkbox for "conditions" created in includes/templates/bootstrap/templates/tpl_checkout_payment_default.php doesn't include the "required" attribute. This is fixed in more recent versions of the template but wasn't listed as one of the fixes - just wanted to put a note here in case someone else hit this issue.

[QUOTE=lat9;1400527]v3.6.5 of the Bootstrap template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

I am about to upgrade to ZC2.0.0. Are there any known issues with 2.0.0?

Quote:

---

Originally Posted by pegasuspublishing

I am about to upgrade to ZC2.0.0. Are there any known issues with 2.0.0?

---

Works like a champ!

I have finally gotten around to using a copy of my actual store database to test upgrading to 2.0.0. I just ran into something that I have not seen. The text and title of the product are squeezed into a long rectangular div about 1/3 the width of the card. I tried to post an image but the forum says I have exceeded my quota? Any idea on WHERE to start looking for the issue?

Quote:

---

Originally Posted by g2ktcf

I have finally gotten around to using a copy of my actual store database to test upgrading to 2.0.0. I just ran into something that I have not seen. The text and title of the product are squeezed into a long rectangular div about 1/3 the width of the card. I tried to post an image but the forum says I have exceeded my quota? Any idea on WHERE to start looking for the issue?

---

so its not 1/3, its HALF the width of the product image.

Quote:

---

Originally Posted by g2ktcf

I have finally gotten around to using a copy of my actual store database to test upgrading to 2.0.0. I just ran into something that I have not seen. The text and title of the product are squeezed into a long rectangular div about 1/3 the width of the card. I tried to post an image but the forum says I have exceeded my quota? Any idea on WHERE to start looking for the issue?

---

Quote:

---

Originally Posted by g2ktcf

so its not 1/3, its HALF the width of the product image.

---

Grab a screenshot, save it to a dropbox link or on the site; that'll get around the image-quota in the forums.

Quote:

---

Originally Posted by lat9

Grab a screenshot, save it to a dropbox link or on the site; that'll get around the image-quota in the forums.

---

https://www.dropbox.com/scl/fi/hb1yr...=um4y8znv&dl=0

Try that.

Yep, see this GitHub Wiki article: https://github.com/lat9/ZCA-Bootstra...splay-examples

FWIW, the upcoming 3.7.0 release of the template corrects that; see this (https://github.com/lat9/ZCA-Bootstra...1f3d02e19dd9b7) GitHub commit for the changes required.

Quote:

---

Originally Posted by lat9

Yep, see this GitHub Wiki article: https://github.com/lat9/ZCA-Bootstra...splay-examples

FWIW, the upcoming 3.7.0 release of the template corrects that; see this (https://github.com/lat9/ZCA-Bootstra...1f3d02e19dd9b7) GitHub commit for the changes required.

---

Yep. That did the trick. You are awesome!

Quote:

---

Originally Posted by lat9

Yep, see this GitHub Wiki article: https://github.com/lat9/ZCA-Bootstra...splay-examples

---

New install with 2.0.0 and latest bootstrap. PHP is 8.1

Have no problem with the site. Where I'm struggling is to get the define_main_page to act like Display example 1 in the wiki above.

I thought that simply tagging the columns as .card .mb-3 and then each block of image/title with .card-body .text-center as it's done when a category is displayed would do the trick.

Unfortunately, the flex settings did not play as well on the main page as on the listing on a categories page. Although everything else switches to a centered, single column when switching to mobile, what I came up with continues with the three columns on a mobile.

In looking more at the code for a category's page, it looks as if it might need all the items to actually be in a card-deck div with all the card decks in a single card-body div. Finally, all that is surrounded by the card mb-3 div.

I've no need for the border around the card-body or the border on card-deck, so it might be better to just wrap car-deck items with the card mb-3 div.

Thoughts from the experts?

You've got some change to the layout that's affecting the display. See this demo page for an example: https://zc158.vinosdefrutastropicale...index&cPath=23

Using the default grid layout and Configuration :: Product Listing :: Columns per row set to 0, the listing displays 3-across on large screens, 2 across on medium screens and 1-across on small screens.

Quote:

---

Originally Posted by lat9

You've got some change to the layout that's affecting the display. See this demo page for an example: https://zc158.vinosdefrutastropicale...index&cPath=23

Using the default grid layout and Configuration :: Product Listing :: Columns per row set to 0, the listing displays 3-across on large screens, 2 across on medium screens and 1-across on small screens.

---

So, I changed that setting and now I have 4-5 columns across depending on the size of the viewport. BUT the widths of the columns do not seem to be adjusting properly. The images are LARGER than the card sometimes and I have 4 columns when I think I should have 3. I downloaded 3.7.0 yesterday and I am going to install it today and see what it does.

Yep,

Left out one of the divs:

Code:

---

<div class="card mb-3"><div class="card-body text-center" id="subCategory-card-body">
<div class="card-deck text-center">
<div class="categoryListBoxContents card mb-3 p-3 text-center"><a href="index.php?main_page=index&amp;cPath=65"><img alt="Handcrafted $$$$$$$$$$$$" loading="lazy" src="/images/tinctures.png" title="(image for) Handcrafted $$$$$$$$"><br>
Handcrafted $$$$$$$$$</a>
</div>
</div>
</div>
</div>

---

Works fine full screen desktop and Mobile portrait but it doesn't wrap to like three wide when the screen size is reduced, the mobile is in portrait, or the tablet is in either portrait or landscape.

None of that happens with a regular category page.

More playing to come with suggestions appreciated.

Question...I have not seen this anywhere in the install instructions (yes I looked!)

When upgrading from one version to the next, is it a requirement to REMOVE the older files that are not used in the new version?

AND

I have cloned bootstrap. So when I upgrade (going to 3.7.0) I have been copying every folder "bootstrap" and renaming it to "my bootstrap". Is this the correct process?

Thanks in advance!

Quote:

---

Originally Posted by g2ktcf

Question...I have not seen this anywhere in the install instructions (yes I looked!)

When upgrading from one version to the next, is it a requirement to REMOVE the older files that are not used in the new version?

AND

I have cloned bootstrap. So when I upgrade (going to 3.7.0) I have been copying every folder "bootstrap" and renaming it to "my bootstrap". Is this the correct process?

Thanks in advance!

---

The first time you go to delete a "not needed" file and remove a file you actually need, you will no longer worry about leaving an unused file on your site.:P Been there, done that.

Are far as renaming bootstrap to your current clone, I don't think the system will let you rename and overwrite an existing/file or folder. It will ask you if you try to copy but generally errors out with "that file already exists".

The original distro of Bootstrap has a YOUR_ADMIN foilder and no YOUR_TEMPLATE folders. It's a drop in for initial installation.

When doing an upgrade, in addition to renaming the YOUR_ADMIN folder, you can do three of two things.

First (and will probably cause a loss of customization) Rename all the bootstrap folders to your current template folder's name. (Sort of what you are doing now)

Best is to take the bootstrap folders and use something like winmerge to compare the new files to your cloned templlate.

With the proper tools and files, you can find out what files have been updated and upload just those files to their proper place.

Just a quick question.

Where can i get some more information about the Carousel feature in the template?

Thanks

Quote:

---

Originally Posted by amebb

Just a quick question.

Where can i get some more information about the Carousel feature in the template?

Thanks

---

Home-Page Slider: https://github.com/lat9/ZCA-Bootstra...Slider-Feature

I'm playing catch-up on the documentation for the sidebox/centerbox carousels, but should have that finished in a couple of weeks.

Quote:

---

Originally Posted by lat9

Home-Page Slider: https://github.com/lat9/ZCA-Bootstra...Slider-Feature

I'm playing catch-up on the documentation for the sidebox/centerbox carousels, but should have that finished in a couple of weeks.

---

Thank you very much for your help

hi im having an issue with this template where i cannot move my sideboxes from left to right. when i move the side box from left to right they do not show up on the site

Quote:

---

Originally Posted by immortalgames

hi im having an issue with this template where i cannot move my sideboxes from left to right. when i move the side box from left to right they do not show up on the site

---

Template version and Zen Cart version, please.

currently on verion 1.5.8a

Quote:

---

Originally Posted by lat9

Template version and Zen Cart version, please.

---

currently on verion 1.5.8a

... and what steps are you performing to "move" a sidebox from the left to right?

Quote:

---

Originally Posted by lat9

... and what steps are you performing to "move" a sidebox from the left to right?

---

admin - tools - layout boxes controller

Quote:

---

Originally Posted by immortalgames

admin - tools - layout boxes controller

---

a little bit more information might help. my site was updated from zc1.5.5 to 1.5.8 where my old template was no longer supported. is there a sql i can execute with all the layout boxes as defult like the demo for this template.

https://github.com/zcadditions/ZCA-B...0.0c/issues/57

when i revert back to the defult zc template all the boxes go back into there places / hold on i was wrong about that i seem to be having the same issue with the defult bootstrap also. I will post again if this pursists as this is the template im going to be using.

So, I downloaded 3.7.0 Beta 6 as I wanted to see what happens to my products listings. Now I cannot get a three column format at all. I get 6, 4, 2 and so forth. I have slowly adjusted my width to see the changes. Also, my product images are not scaling for the width of the card. See the link below. that has a 5 column. I am open to having more columns, but the image problem is a no go. I have my side bar width set a 2 and the main screen at 10.

https://www.dropbox.com/scl/fi/r0mkt...=oyovi6yp&dl=0

ZC 1.57c Bootstrap 313

How do you get a sidebox to display in mobile view?
Specifically the currencies box in this case.

Box Settings
Left/Right Column Status: ON
Location: (Single Column ignores this setting) RIGHT
Left/Right Column Sort Order: 0
Single Column Sort Order: 0
Single Column Status: ON

All sideboxes disappear in phone view.

Not sure if this is just an issue with this template - I'm having the same issue with Responsive Classic.
I'm assuming it must be a setting I've got wrong because not having the option of currency or language selection on phones can't be right.

Quote:

---

Originally Posted by gsh68

ZC 1.57c Bootstrap 313

How do you get a sidebox to display in mobile view?
Specifically the currencies box in this case.

Box Settings
Left/Right Column Status: ON
Location: (Single Column ignores this setting) RIGHT
Left/Right Column Sort Order: 0
Single Column Sort Order: 0
Single Column Status: ON

All sideboxes disappear in phone view.

Not sure if this is just an issue with this template - I'm having the same issue with Responsive Classic.
I'm assuming it must be a setting I've got wrong because not having the option of currency or language selection on phones can't be right.

---

In mobile view, I do not think any of the sideboxes are used. The sidebox settings are typically only for the full screen format as there is no room for them on a small screen.

Quote:

---

Originally Posted by g2ktcf

In mobile view, I do not think any of the sideboxes are used. The sidebox settings are typically only for the full screen format as there is no room for them on a small screen.

---

I get that but how are currency and language selections displayed in mobile view if this is the case?

Quote:

---

Originally Posted by gsh68

I get that but how are currency and language selections displayed in mobile view if this is the case?

---

I believe it should default to the hamburger menu. But I am guessing as my current design does not have currencies listed at all. I tried to enable them just to check for your. But no matter what settings I use, they do not show up. Now understand that I am using ZC 2.0.0 and Bootstrap 3.7.0 Beta 6 so it may not be apples to apples.

If hamburger menu is not good enough, there is the Language and currency in header plugin here.
I have submitted a new version for ZC v2.0.0 and bootstrap 3.7, it should be available soon.

Quote:

---

Originally Posted by pilou2

If hamburger menu is not good enough, there is the Language and currency in header plugin here.
I have submitted a new version for ZC v2.0.0 and bootstrap 3.7, it should be available soon.

---

Thanks. I found that plugin last night. Seems like a possibility but tbh I'd prefer text/dropdown box than currency symbols but will have a closer look at it.

I installed a fresh copy of the latest Bootstrap template to check if it moves currency selectionto the hamburger in mobile view and it doesn't - not on Bootstrap or Responsive Classic.

Anyone been able to get this behaviour to work?

Quote:

---

Originally Posted by gsh68

Thanks. I found that plugin last night. Seems like a possibility but tbh I'd prefer text/dropdown box than currency symbols but will have a closer look at it.

I installed a fresh copy of the latest Bootstrap template to check if it moves currency selectionto the hamburger in mobile view and it doesn't - not on Bootstrap or Responsive Classic.

Anyone been able to get this behaviour to work?

---

That mobile-menu you see when you click the hamburger icon is created by the Bootstrap template's /common/tpl_offcanvas_menu.php. I need to think about how to enable the 'easy' sidebox selection (and associated ordering) for those small-screen menus as that'll affect the functionality of the responsive_classic template as well.

Quote:

---

Originally Posted by g2ktcf

So, I downloaded 3.7.0 Beta 6 as I wanted to see what happens to my products listings. Now I cannot get a three column format at all. I get 6, 4, 2 and so forth. I have slowly adjusted my width to see the changes. Also, my product images are not scaling for the width of the card. See the link below. that has a 5 column. I am open to having more columns, but the image problem is a no go. I have my side bar width set a 2 and the main screen at 10.

https://www.dropbox.com/scl/fi/r0mkt...=oyovi6yp&dl=0

---

I cannot seem to find the solution for this. I am in the developer console in chrome. The first product card is div.col.mb.4 and is 175x829.06. The image in the card is below and it is scaled at 264. There seems to be a disconnect between the size of the column and rendered image from IH???

Code:

---

<img src="bmz_cache/c/ce0920250005_front_largejpg.image.220x264.jpg" title="Translucent 250g" alt="(image for) Translucent 250g" width="220" height="264" class="img-fluid listingProductImage" loading="lazy">

---

Quote:

---

Originally Posted by lat9

Home-Page Slider: https://github.com/lat9/ZCA-Bootstra...Slider-Feature

I'm playing catch-up on the documentation for the sidebox/centerbox carousels, but should have that finished in a couple of weeks.

---

That documentation is now available: https://github.com/lat9/ZCA-Bootstra...rbox-Carousels

v3.7.0 of the ZCA Bootstrap Template is now available: https://www.zen-cart.com/downloads.php?do=file&id=2191

This major release contains changes associated with the following GitHub issues:

#160: Refactor/sync layout of the various product_xx_info templates
#285: Price displays twice when a product includes attributes.
#291: Include a home-page slider
#292: Checkout Shipping shows "Continue" to Step 2 Payment, when not available/no shipping allowed
#308: Correct 'misuse' of <main> tag.
#358: Update to use FA-6, allow preloading to be disabled.
#359: Correct product-listing/category-row display for 'columns' display
#360: Enable the exclusion of no-product categories from the categories' sidebox and upper navigation.
#362: Drop support for Zen Cart versions prior to 1.5.8.
#363: Correct MySQL/ANSI-mode issues.
#365: Incorporate zc158 changes to the attributes' display.
#367: Correct the SQL uninstall script for the Bootstrap Colors configuration.
#369: Enable different container types for header/main-content/footer.
#370: <meta charset must precede preload links; HTML validation issue.
#371: zca_rating_stars always outputs 5 stars.
#372: Enable a carousel display on various sideboxes.
#375: Enable carousel display on new, featured and specials centerboxes, they can either 'fade' or 'slide'.
#377: Add jquery.matchHeight{.min}.js to address jiggly bits on sidebox/centerbox carousels.
#380: Correct checkout_confirm coloring (was using those for checkout_continue).
#384: Include zc201 notifications for sideboxes ('information', 'more_information', 'ezpages').
#385: Move header-messages to below logo; they were being overlaid by the fixed-top navigation.

Refer to the template's GitHub wiki for additional information: https://github.com/lat9/ZCA-Bootstrap-Template/wiki

ZC158a
ZCA v3.6.5, v3.7.0
PHP 8.2

The function zca_get_translated_month_name() selects $zcDate->output('%B') and not strftime('%B') because I'm running zc1.5.8a.
$zcDate shows the name of the month in English, strftime() uses the current 'locale'.
How could I fix that?

TIA,

jpda

Quote:

---

Originally Posted by jpda

ZC158a
ZCA v3.6.5, v3.7.0
PHP 8.2

The function zca_get_translated_month_name() selects $zcDate->output('%B') and not strftime('%B') because I'm running zc1.5.8a.
$zcDate shows the name of the month in English, strftime() uses the current 'locale'.
How could I fix that?

TIA,

jpda

---

Actually, it's not using strftime since you're running PHP 8.2 ... and that function's deprecated/removed.

What language is the site using and what's that main language file's (e.g. lang.english.php for English) $locales set as?

The setting for the as-distributed English language file is

PHP Code:

---

global $locales;
$locales = ['en_US', 'en_US.utf8', 'en', 'English_United States.1252'];
@setlocale(LC_TIME, $locales); 


---

Quote:

---

Originally Posted by g2ktcf

I cannot seem to find the solution for this. I am in the developer console in chrome. The first product card is div.col.mb.4 and is 175x829.06. The image in the card is below and it is scaled at 264. There seems to be a disconnect between the size of the column and rendered image from IH???

Code:

---

<img src="bmz_cache/c/ce0920250005_front_largejpg.image.220x264.jpg" title="Translucent 250g" alt="(image for) Translucent 250g" width="220" height="264" class="img-fluid listingProductImage" loading="lazy">

---

---

I am at my wits end on this.

What is the expected behavior for the flex columns as they get larger? What metrics drives the number of displayed columns and why are my images not matching? I really need to get my site updated as just the shear number of debug logs I get everyday is hard to manage. But I cannot go to the new version with the display being so messed up.

Quote:

---

Originally Posted by g2ktcf

I am at my wits end on this.

What is the expected behavior for the flex columns as they get larger? What metrics drives the number of displayed columns and why are my images not matching? I really need to get my site updated as just the shear number of debug logs I get everyday is hard to manage. But I cannot go to the new version with the display being so messed up.

---

You control the size of images in product listings via Configuration :: Images :: Image - Product Listing Width/Height. The default is 100/80. Perhaps you've got the values set too high?

> What metrics drives the number of displayed columns and why are my images not matching?

Possibly helpful:
https://docs.zen-cart.com//user/temp...e-in-bootstrap