Solved

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

Posted on 2011-09-14
14
510 Views
Last Modified: 2012-05-12
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
Comment
Question by:mel11755
  • 7
  • 4
  • 3
14 Comments
 

Author Comment

by:mel11755
ID: 36540069
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
 

Author Comment

by:mel11755
ID: 36540075
The other 3 stylesheets it references.
style-imagehover.css
stylesheet-custom.css
stylesheet-ie-fix.css
0
 

Author Comment

by:mel11755
ID: 36540078
One more thing. It is using Zen Cart for her shopping cart.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36540147
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
 

Author Comment

by:mel11755
ID: 36540407
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
 
LVL 16

Expert Comment

by:SSupreme
ID: 36541699
Could you please provide a link to website?
0
 
LVL 14

Expert Comment

by:Scott Madeira
ID: 36542491
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:mel11755
ID: 36543664
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
 

Author Comment

by:mel11755
ID: 36543899
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
 
LVL 14

Expert Comment

by:Scott Madeira
ID: 36545214
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
 
LVL 14

Expert Comment

by:Scott Madeira
ID: 36545240
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
 
LVL 14

Accepted Solution

by:
Scott Madeira earned 250 total points
ID: 36545438
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
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 250 total points
ID: 36545628
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
 

Author Closing Comment

by:mel11755
ID: 36546414
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now