Help with Background Images on Product Details Page

[Don Wagner]

Created a new store - V2.1.0, PHP 8.3, MySQL 10.6.24-MariaDB, then loaded my Version 1.5.6b SQL data into it "reinstalled" V2.1.0 as a database upgrade. Then loaded Template Fluorspar, and am making all my file modifications from scratch. (Due to many clueless changes I've made over the years - since 2013, wanted to start all over.)

So anyway, my old store had a consistent background graphic, instead of some content being in white boxes, and I can't for the life of me figure out how I did it. I'm guessing/hoping it's not rocket science.

Old Store:

[balihr]

Oh, it's not rocket science, that's child's play. Rocket scientists tremble in the presence of CSS scientists. As the old saying goes, those who fail in CSS science, become rocket scientists.

Since you didn't post a URL, I can't give you the EXACT code to change, but your #productListing container (could be named differently) has a background color set to #FFF (white). This might actually be on centerColumn - I'm not familiar with the template so I don't really know. You should just remove that line from your css file and you'll get your background back. Do the same with any other container that has the same. The easiest way to find out where it is would be to right-click the element and use the Inspect tool and then look at the Inspector tool and the CSS which will even tell you the file and line you need to change.

[Don Wagner]

Thanks balihr! I really appreciate your help. Would you mind taking a look and providing a few more details? I had made some changes to the Fluorspar Template files, and flagged files that had been changed. The indictacor at a glance that I had made changes was, the original file was saved with a "-BU" suffix, and then the changes were made. So there is a stylesheet.css (changed), and a stylesheet-bu.css (original). Inspection shows both files being used? I'm in cognitive dissonance on how that could be.

https://samadhi-insights.com/dev-202...roducts_id=904

[balihr]

Stylesheet-bu.css is loading - that's perfectly normal. Zen Cart will automatically load ANY files in your css directory that start with style - simply rename that file to x_stylesheet-bu.css and it won't load anymore.

Once THAT file is out of the way, your white background should be gone as well. I can see you've removed it from centerColumn, but it's still being loaded from the stylesheet-bu.css file.

If you're leaving backups in their original directories, I'd suggest changing their extensions as well. For example, tpl_header.php to tpl_header.php_backup, or stylesheet.css to stylesheet.css_backup. That's USUALLY a safe way to exclude the files from loading.

[dbltoe]

Realizing that my main focus is Accessibility, followed by correct HTML, CSS, etc., "Pretty" is somewhere down my list.

Both the provided responsive_classic and lat9's ZCA Bootstrap are near perfect out of the box on accessibility and code correctness. The reasoning behind black on a white background is that the result is the best possible contrast for anyone, period. When you start adding an image as a background, you make it difficult for contrast checkers (except this one) can't check your result when you put text on top of a graphic.

Your bg.jpg does make matters a lot easier. If you tried to place text on one of your main page sliders, you'd have a much harder time. BTW, it's always better to have text over an image rather than in an image. Both search engines and those visually impaired cannot "see" the text.

Here's an option to try based on the ID 904 page you provided.

First, the subject of transparency. Zen Cart starts with a complete background that has many items laid on top in layers. In some cases, the layers on top of your bg.jpg can be four or more deep.

My solution, again for your ID904 page, is to make the white backgrounds somewhat transparent so that the background shows but does not overwhelm the most important information.

In CSS, it's known as opacity. The easiest way to deal with opaque colors is to use rgba code. That takes something like white (rgb - 255,255,255) and adds the a (opacity) so that rgba(255,255,255,1) would be solid white, rgba(255,255,255,0.5) would be half opaque, and rgba(255,255,255,0.1) would all but make the white disappear.

Again, in the case of the !D904 page, you have the bg.jpg under the #productGeneral div (white background) and the #productGeneral div has both the #productsDescription and #productsDetailList ul on top of the #productGeneral div.

That means, you have to adjust each layer differently so that it appears that the overall combination appears to have one background.

The following changes to your stylesheet will set a transparency for your overall product view and, then, make the details appear to have the same background as the #productGeneral div.

for your CSS:

Not using bootstrap, I would create a stylesheet_zcustom.css in your template's CSS folder and put all the override codes in there.

div#productGeneral {    background-color: rgba(255,255,255,0.5);
}
#productDescription, #productDetailsList ul{
    background-color: rgba(255,255,255,0.1);
}

Note that the second rule requires more transparency (less opacity) in order to "match" the rest of the #productGeneral.

Apologies if I'm covering items you're familiar with, but not knowing the expertise of a poster, I prefer to fully explain for future explanations for someone having the same problem and no clue what they're doing.

[chadlly2003]

If I understand you correctly you want to remove the white space from website.

go to path: includes/templates/fluorspar/css/stylesheet.css

find this

#productGeneral {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(247, 247, 247);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: normal;
    color: rgb(0, 0, 0);
    margin: 10px 0px 0px 0px;
    padding: 10px;

and replace it with

#productGeneral {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(247, 247, 247);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: normal;
    color: rgb(0, 0, 0);
    margin: 10px 0px 0px 0px;
    padding: 10px;
    background:transparent;
    border:none;
}

[Don Wagner]

These suggestions are working great - a very heartfelt thanks to all of you for your support! Don't worry about covering basics I'm already familiar with - a Venn diagram would show little chance of that. Planning on setting aside several days to study DevTools as it looks like the answers are usually staring me right in the face.

Thanks again for your help!