Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 596
  • Last Modified:

How do you change the background color on a website using Zen Cart/cpanel

I have a client that is hosting their ecommerce website on Heritage Web Solutions and she has asked me to update her website.  Heritage Web Solutions uses cpanel for the user interface, which is not so much the problem. The problem is I can't find the files that has the code to change background color, fonts and so forth.  There are three.css  files that if references to when you go to the webpage and click on page\view source. I see where the code references the  css sheets and the images and such, but to actually find the those css or other pages I can not find anywhere under cPanel. I was able to change her header and buttons by renaming the original files and naming the new files with the old image names. This is driving me crazy.  I am attaching the page code retrieved from the actual webpage and by click on the page option on the tool bar and selecting "View Source".  
page-source-code.htm
0
Melinda Burns
Asked:
Melinda Burns
  • 7
  • 4
  • 3
2 Solutions
 
Melinda Burnscomputer supportAuthor Commented:
I have found and printed out all the .css stylesheets but none of them have the code I am looking for.

See attached files.
print-stylesheet.css
0
 
Melinda Burnscomputer supportAuthor Commented:
The other 3 stylesheets it references.
style-imagehover.css
stylesheet-custom.css
stylesheet-ie-fix.css
0
 
Melinda Burnscomputer supportAuthor Commented:
One more thing. It is using Zen Cart for her shopping cart.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
SSupremeCommented:
In stylesheet-custom.css you can find:
body {

   margin: 0;

   font-family:"Comic Sans MS", cursive;

   font-size: 12px;

   color: #000000;

   background-color: #F0EAD6;

   background-image:url(../images/bg2.jpg);

   background-position:top center;

   background-attachment:fixed;

   }
color is font color, background-color is background color.
0
 
Melinda Burnscomputer supportAuthor Commented:
I saw that, but apparently on the actual page, the original developer must have overriden the .css and changed the background color and font in the actual page as it did not change the color or font colors when I made the changes.
0
 
SSupremeCommented:
Could you please provide a link to website?
0
 
Scott MadeiraCommented:
In Zen cart the css files are associated with the layout templates that are being used.  you can have multiple themes on your site and have any one of them active at any time.

You want to start looking in /includes/templates/[template name]/css   where [template name] is the name of the template.  It comes with a couple including template_default which takes effect for anything that is not overridden in another template file.  Others there may include classic or blue_strip.

There should be a file there called stylesheet.css which is the main stylesheet for the site when using the template called [template name].

If you have more than one template installed you will need to figure out which one is installed by logging into the store through the admin section.

0
 
Melinda Burnscomputer supportAuthor Commented:
SSupreme > Here is the website link. http://www.scent-sanctuary.com

smadeira> I have logged into the admin page and cannot figure out which template it is using.
I am attaching some files from the admin page
   
Designer-Controls---ScentSanctua.mht
Designer-Css---ScentSanctuary-Ad.mht
Template-Select---ScentSanctuary.mht
Upload-Design---ScentSanctuary-A.mht
0
 
Melinda Burnscomputer supportAuthor Commented:
I think the source code page I attached originally is in error, Here is the correct source code from the actual website.

This page makes sense to me, but I can't find it in all the admin pages

HomePageSourceCode.htm
0
 
Scott MadeiraCommented:
You only have one template installed and it is in the custom directory.

css files should be located at: /includes/templates/custom
/css

But, the background color is being set in a file called header.css which is the root directory.  

Below is the body block that you need to change to change the background color.  The color is defined as #331200 at the end of the background: attribute.  

 
body {
    background: url("images/bgback1.jpg") repeat-x scroll 0 0 #331200;
    color: #000000;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 62.5%;
    margin: 0;
}

Open in new window



0
 
Scott MadeiraCommented:
Sorry, I looked further.  The actual background color is in the images/bgback1.jpg file which overlays the background color.  You would need to edit that image to get rid of the brown background.
0
 
Scott MadeiraCommented:
If you are looking to change the very attractive orange background color used in the main content area that is set in the file:

cart/includes/templates/custom/css/stylesheet_custom.css  line number 51.  

Here is the block that it is in....

#contentMainWrapper {
    background: none repeat scroll 0 0 #FF7F00;
    color: #FFFFFF;
}
0
 
SSupremeCommented:
line 45 in stylesheet-custom.css  #mainWrapper {
    background: none repeat scroll 0 0 #FF7F00;
    text-align: left;
    width: 900px;
}
line 1 in header.css  #mainWrapper {
    background: none repeat scroll 0 0 #FFE27E;
    border: 0 solid #CCCCCC;
    margin: auto;
    text-align: left;
    width: 922px;
}
and
line 51 stylesheet_custom.css #contentMainWrapper {
    background: none repeat scroll 0 0 #FF7F00;
    color: #FFFFFF;
}

all this rules makes background color, you need only one, so you can delete one from header.css for example.
0
 
Melinda Burnscomputer supportAuthor Commented:
Thank you to both smadeira and ssupreme for your answers. As I was sending you the information on the .css sheets I figured out that it was in line 51 to change the body of th content pages from orange to another color. I tested it and it worked.  I was trying to changed line 45 and nothing was changing.

But I appreciate your follow up on my question and your confirmation I found the right line of code to change. Now I just need my client to find an appropriate color to change it to. She wanted to change it to eggshell but the white font in the side box gets washed out and plus the eggshell is not very attractive. So I am in a holding pattern now.  Thanks again for all your support.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now