Customizing ZenCart Template

[setools]

Hello! I am a first time ZenCart user and I've run into a major obstacle. Although I now know how to edit almost everything on my site (fonts, columns, colors, etc.), I am having trouble figuring out how to cusomize my template with my own images, backgrounds, etc. If anyone has any advice I would really appreciate hearing from you! Thanks!

[afo]

You need to be a bit more specific with your question.

If you want to use a background image, you add it to the correct place(s) in the stylesheet. Here's an example fromt the stylesheet used in the Fan Odyssey site in my sig.

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #000000;
  background-image: url('../images/space011.jpg');
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#logoWrapper{
  background-image: url('../images/space011.jpg');
	background-repeat: repeat-x;
	background-color: #000000;
	height:110px;
	width: 100%;
	}

[dukie6675]

Hi Afo,

I think I have the same question. For the default theme, the page is centered on the screen. I would like to make the width of the page wider. I have gone to the css file, but I cant seem to find the correct setting to make the page wider.

Which file and setting would that be?

Thanks.

[dukie6675]

Solved my own problem. I was altering the stylesheet.CSS under the default, not the classic directory.

Now it works fine. set it to width=95%

[clydejones]

Hi Afo,

I think I have the same question. For the default theme, the page is centered on the screen. I would like to make the width of the page wider. I have gone to the css file, but I cant seem to find the correct setting to make the page wider.

Which file and setting would that be?

Thanks.

open your stylesheet.css find the following declaration and change the highlighted portion to suit your needs.

#mainWrapper {
background-color: #000000;
background-image: url('../images/space011.jpg');
text-align: left;
width: 750px;
vertical-align: top;
}

[stevesh]

And, you shouldn't be altering files in either default or Classic. Much better idea to set up your CUSTOM template first thing.

[noobuser]

same opinion. use the custom template and modify here, else the next upgrade will overwrite all the default files and you will land up restoring your modified files.

[afo]

same opinion. use the custom template and modify here, else the next upgrade will overwrite all the default files and you will land up restoring your modified files.

and if you restore your modified files, you're likely to remove the changes that prompted the upgrade/update. If you create your own custom template, your changes are protected and you can compare your changes to the latest version of ZC. It's the easiest way to do things. The override/template system works very well.