How can I change the background color in the product matrix?

[juliacreinhart]

We're using the Burst theme and my client wants to change the background color in the product matrix to blue.

Is there a style sheet that controls the visual display of a product when it's shown in the product matrix?

A sample page of what I'm talking about is here: http://swanzshop.com/store/page56.html

[juliacreinhart]

I should probably specify: The overall page background should remain white, just the background inside each product box should turn blue.

[juliacreinhart]

also, where would I change the color in which the sale price is displayed?

[Jim]

The product layout has <div class="prod_info"> around the product content.
There are 2 style sheets loaded on the page
<link type="text/css" rel="stylesheet" href="http://swanzshop.com/store/publish/flex-build.css">
<link type="text/css" rel="stylesheet" href="http://swanzshop.com/store/publish/flex-build-000001.css">

So the class could be defined in one of them, I looked for it but couldn't find it. So you could add it to one of those files or you could add it to a text field that gets loaded at the top of your pages.

[Jim]

There is also a style for the image area of the product so you will probably want to modify it also. The Sale price is in a span but I don't see a class assigned to it but there may be a style defined for the entire product that affects the color of the sale price text. Check through the html output and you should be able to find the appropriate style and then be able to edit it. Most of the colors are adjusted by the color settings on either the Pages, or Shopping Cart config or the Preferences > Layout settings screens in the backoffice so you could look at what colors are used on the page and check those screens to see if any of them will modify the page.

[juliacreinhart]

tried to define the prod_info class, but to no avail. Here's my code. What's wrong with it?

.prod_info {
background-color: #C4E6F2;
}

is now included in flex-build.css

[juliacreinhart]

I also saw the product info is surrounded by the tag loop_product, so I updated that, too in flex-build.css:

table.prod_border td.loop_product {
border-bottom: 1px dotted #DEDEDE;
background-color: #C4E6F2;
}

as well as td.loop4

again no change.

Here's the code from the source page that showed me the different tags:


<td class="loop_product loop4 left"><!-- rec 27 -->
<a name="27"></a>



<div class="pr_img"_left pr_img_clear><img src="http://swanzshop.com/store/media/ss_size2/3GAPPNK7599.jpg" alt="3GAPPNK7599.jpg" width="150" height="150" vspace="0" hspace="0" border="0"></div>
<div class="prod_info">
<span class="pr_nme">GAP Pink Skirt (7)</span>
<span class="pr_sku Bold Small">3-G-7-GAP-PNK-SK-5.99</span>
<span class="pr_desc Bold Normal">pink corduroy skirt</span>
<span class="pr_prc Bold Normal">
<strike>$29.99</strike> <span>$5.99 On Sale!</span>
</span>

<form action="http://swanzshop.com/cgi-bin/sc/order.cgi" method="post">
<input type="hidden" name="storeid" value="*183c9186804fd49e1073b7b24103">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">

I still don't see a blue background

[juliacreinhart]

I actually changed the

Quantity Background Color:
Price and Comment Background Color
On Sale Background Color:

tabs in ShopSite > Preferences > Product Defaults.

Again, no blue background visible

[Jim]

It works for me. I added the code you had to put a blue background around the bottom part of the product layout and a background-color: red; to the .pr_img tag to put a red background around the image at the top of the product layout Here is the code for that.

Code: Select all

.pr_img {
   display: block;
   min-height: 158px;
   padding: 0px;
   margin: 0px auto;
   text-align: center;
   clear: both;
   background-color: red;
}
.prod_info {
background-color: #C4E6F2;
}

And my products have a red background around the image and a blue background around the rest of the product.

The changes I made were to a "Publish" file called flex-build.css. So make sure that you are making your changes under the Merchandising > Custom Templates > Includes > Publish section not just in the includes section.

[juliacreinhart]

I had just edited the flex-build.css file on the server. That not good enough?

Also, I made the change as outlined below and I do not see the changes after I publish the store. I did empty my cache. Mysterious ...

[Jim]

where on the server was the flex-build.css file? What is the directory path from either the data directory or the sc directory or the store's output directory?

If I load the css file that is being used by the page I don't fine either of the changes.
See http://swanzshop.com/store/publish/flex-build.css

Note that since this is a "publish" file it exists in at least 2 places, in the ShopSite provided templates under sc/templates/publish and possible in <datadirectory>/templates/publish if you made a copy through the backoffice template interface.

The other location where the file will be is the <store's output directory>/publish. Files in this directory are over written when the store is published if the checkbox on Utilities > Publish is checked to generate publish files. So if you made your changes to that file they were probably overwritten when you did a publish. The files in this directory contain processed information from the template tags that are in the files in either the data/templates/publish or the sc/templates/publish directories. This allows template tags for colors, images etc to get the data from the database and use it in the file instead of just hard coding the values. It also makes it possible to use the html include type statement in your html so the information is in an external file that the browser only has to load once instead of the code being on every page and adding to the amount of data that has to be download each time the page is loaded.

To prove that this is what is happening make your changes to the same publish file as you did before and without publishing go to the page and do a browser refresh to clear the cache. You should see the background colors. Then publish the store and reload the page and refresh the browser and the colors will be gone.

Right?

So if you are going to make changes on the server you should really be making a copy of the ShopSite template file through the backoffice so that it is placed in your local directory and then edit that file. Note that ShopStie template files will be overwritten on an upgrade so if you make changes to those you will lose them. The templates in the merchant area are not overwritten on an upgrade so you are safe make changes there.

[juliacreinhart]

Yeah, that is what's happening. So where would I have to upload the files to in order to keep the changes?

[juliacreinhart]

I know you gave me the answer, but at this stage I'm a bit confused. Should I upload this through custom templates and give it a different name, or where exactly should I now upload the flex-build.css file?

Thanks for clarifying and helping me deal with this.

[Jim]

Go to Merchandising > Custom templates > Includes and in the section Publish you can do one of two things:
1. Use the New Publish button to create a new file and give it the name flex-build.css. Select the flex-build.css from the list and click the Edit Publish button. Paste the entire file that you have been modifying into the window and Save Changes.
2. Use the Copy ShopSite template option to make a copy of the flex-build.css , You will have to give it a different name, such as flex-build.css1, and then click the copy button. Then modify that file to include you new style changes and Save Changes. Next use the Copy Publish button and give it the name flex-build.css so that it will override the ShopSite version of the file.

Once you have done either of those you're done so go to the Utilities > Publish screen and click the Regenerate button to publish your store pages.