small change in CSS sheets ruins page

This is my 3rd zen cart so have a little experience. Using the latest version just downloaded yesterday. Every time I try to change the background to grey, and upload my new css sheet to my custom folder, see what happens: My banner is gone, sizing all messed up, etv:

http://www.carolsilrum.com/catalog/index.php?main_page=

Any help appreciated. I am still confused about the template system but thought that I had it all figured out. Before this.

You have copied the template_default stylesheet to your custom css folder, and I suspect you're editing the classic stylesheet. If I open your site in Firefox and use the Web Developer plugin, I can change the background-color element in the body rule to #ff0000, and it works.

what is the template you are using and what is the section of the stylesheet are you editing?

where was the banner? Do you mean the logo?

Logo is commented out of this template

What exactly are you changing in the stylesheet and why?

More specifically, perhaps you should list ALL the steps you've done in creating this "custom" template.

Ok, well, first, I followed the instructions for "Template customization/building overrides -- "how do I create a custom template". I called my new template "custom".

The logo I wanted removed, so commented it out. I made my own header, got rid of the old one, and named the new one header_bg.jpg. Everything was working fine at this point. Then, I went to change the CSS style sheet so that I would have a grey background and white type:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #ffffff;
background-color: #333333;
}
uploaded it, and this is what happened. So I went and put the CSS style sheet from the "regular" template back in, and it's fine. So, I then Downloaded the style sheet again, made the above changes, and uploaded back to my custom folder, templates, custom, Css file.

Well, at this point I see this in your stylesheet:```
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #ffff;
[B]background-color: #ccc;[/B]
}

So, it appears as though you're not actually uploading the edited file to the correct location.


I was hoping you'd say what you actually did, rather than just saying "I followed the instructions". Invariably we find many assumptions are made and instructions missed or misread and those unmentioned things are the cause of the otherwise unexplainable problems.

Wait, somehow I missed Stevish's comment. Here is where I'm confused -- I have a CSS stylesheet in my template default, and one in my custom templates folder. Why are there 2 of them, was I not supposed to have that CSS stylesheet in my template default folder? I'm thinking I need to go back to square one here.

The files in your custom template are loaded if they exist, INSTEAD of the template_default files.

The template_default files SHOULD NOT BE TOUCHED.

That's why I wanted to know EXACTLY what YOU did to make your customizations.

If you read back to the template tutorials, you'll see that Zen Cart intelligently looks to YOUR active template's version of its files first, and uses them if it finds them. If it does not find them, then it uses the template_default file by the same name, instead. Thus, you ALWAYS copy a file FROM the template_default folder TO YOUR custom template folder before making alterations. And you ONLY ever copy the files that you're changing.
It works the same with languages.

Didn't you do these same things with the other sites you set up?

Dr. Byte, I'm sorry, here's what I did: created a new folder in Templates called "custom". then, new folders called "images", "sideboxes", "common", and "templates". Then, copied includes/templates/template_default/css directory and placed that, the whole folder, with its contents, into my custom folder. Then, copied the template_info.Php and put it inside my custom folder. Then, using notepad ++, made changes in that where I put template name as "custom", added my name as author, and put in a description.

melissamiller8:

Dr. Byte, I'm sorry, here's what I did: created a new folder in Templates called "custom". then, new folders called "images", "sideboxes", "common", and "templates". Then, copied includes/templates/template_default/css directory and placed that, the whole folder, with its contents, into my custom folder. Then, copied the template_info.Php and put it inside my custom folder. Then, using notepad ++, made changes in that where I put template name as "custom", added my name as author, and put in a description.
Okay, and now how exactly did you attempt to alter the background color? Which file did you edit?
I ask because the file in your custom folder doesn't contain the change.

I just changed my template back to "classic", and now I have my banner. http://www.carolsilrum.com/catalog/index.php?main_page=

I think I'd better start over. Yes, I've done all of this with my other sites, and had some problems but nothing like this. Could be I tried to do all of this when I was too tired.

Dr. Byte, I went and altered my CSS sheet from my custom folder, by going to "includes" then "templates", then "custom", then "CSS", and edited that CSS stylesheet, the top part where the body code is. I just did this all again, this time changing the text to ffffff and the background to 333333. I get these numbers from my photoshop colors, don't know if that's proper or not but always worked in the past. Then, I just uploaded it again. I think it's in the right spot, because I use filezilla and can put it exactly where it's supposed to go.

It appears that your changes are now showing up properly.

Still screwed up:

http://www.carolsilrum.com/catalog/index.php?main_page=

no banner, (HEADER_BG.JPG) and page dimensions are strange...just from making that small change in my css style sheet.

It was not from making that small change. You have the style sheet out of the classic folder when you wanted the style sheet out of the template_default folder

If you continue with that style sheet you will have lots to change.

Go to template_default and get that css and make your adjustments from it and then upload.

Edit: Copy from the default template

I don't mean to confuse this thread any further, but what you're seeing now is the styling from a copy of the template_default stylesheet. I'd know those awful colors anywhere.

Generally, when you create your custom template, you should copy the files from the various folders under the classic template. That way, you'll be beginning with a site that looks just the same as it did before you selected the custom template. Less confusing, I think.

p.s. Anytime you specify a hex color value in css, you need to place the # in front of it. That's why your body background color isn't showing up.

Ok, I think I'm beginning to get it. I work hard each time to follow the tutorials, even printing them off anew each time to make sure I have the latest, and so that I can highlight what's been done. But I have felt uncomfortable with my understanding of the template over-ride system, I now think that the process is starting to dawn on me. I think you all for your help, support, and patience!

There are 2 different styles sheets with different styles

The green template_default (centered)and the classic (full screen)

The classic has all the wild colors. I think of the classic as a tutorial because every style, boxes left and right are colored different. You need a color picker to find the divs and ids that match the colors. After searching and locating the colors in your style sheet you are familiar with not only your style sheet but what ID and Divs and when you ask for help in the forum you will know what exactly you need help with.

If you confuse the 2 as melissamiller8 did you will be horified thinking just one small change made your site fall apart.

usernamenone:

There are 2 different styles sheets with different styles

The green template_default (centered)and the classic (full screen)

The classic has all the wild colors.

Nope. Other way around. The green template with the mainWrapper width of 750px is Classic. The weird colors one is default. It's a little confusing in that the Classic template is installed by default, but it isn't template_default.

Sorry of course you are right.