Solved

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

Posted on 2011-09-14
14
562 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:Melinda Burns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
  • 3
14 Comments
 

Author Comment

by:Melinda Burns
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:Melinda Burns
ID: 36540075
The other 3 stylesheets it references.
style-imagehover.css
stylesheet-custom.css
stylesheet-ie-fix.css
0
 

Author Comment

by:Melinda Burns
ID: 36540078
One more thing. It is using Zen Cart for her shopping cart.
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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:Melinda Burns
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
 

Author Comment

by:Melinda Burns
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:Melinda Burns
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:Melinda Burns
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

630 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