Imaging/Alignment Issues

[Fae Dragonheart]

Hello. I've spent the past three or more hours searching through the forums here in search of a solution to a couple of minor issues I'm having. Only, after reading one of the threads, I fear I might have made a mistake and am hoping it's nothing drastic that I can't fix.

My shop-in-progress is located at http://shop.sharnyl.net. I'm using Zen Cart version 1.38

1. I'd like the logo (currently blank as I work on it), to be centered.

2. I'd like the side boxes to reach almost to the right and left sides. I don't want that much space between them and the edge of the window.

3. I'd like the center to be a little bit wider.

4. How do I figure out the width's of the category headers, for instance, so that I can create the background images in the correct size?

5. I do not want the header and footer background images (the bar that appear at the top and bottom of the page) to repeat.

6. When adding a product to the cart, where do I change the two gray colors? I want those to be the same background and tile back images I'm using everywhere else on the site.

7. Finally, I'd really like to customize the background images for the search, categories, new products headers, etc with my own images that have the text embedded in them already. Can I do this? If so, where do I need to put the url for the images?

My mistake? I edited the classic template css file already. I plan to backup those files and I suppose I can rename it (and all instances of classic in the files) to something else and make it my own template. Am I correct in thinking this?

I'm terribly sorry to bombard you with these questions. I've searched, I've tried the different suggestions, but they didn't accomplish what I want to do.

[clydejones]

1. I'd like the logo (currently blank as I work on it), to be centered.

www.zen-cart.com/tutorials/index.php?article=125

2. I'd like the side boxes to reach almost to the right and left sides. I don't want that much space between them and the edge of the window.

Open you stylesheet.css and change the following declaration as indicated by the highlight

#mainWrapper {
background-color: transparent;
background-attachment: fixed;
text-align: left;
width: 100%;
vertical-align: top;
border: none;
}

3. I'd like the center to be a little bit wider.

See above: also the center section width will depend on the width of the sidebox areas. those you can adjust in admin -> configuration -> layout settings

4. How do I figure out the width's of the category headers, for instance, so that I can create the background images in the correct size?

Make the image width the same size as the sideboxes (the ZC default is 150px)
the image height can be any height you want but 24 - 30px is generally the limit.

5. I do not want the header and footer background images (the bar that appear at the top and bottom of the page) to repeat.

Open you stylesheet.css and add the highlighted portion to the declaration
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #transparent;
background-image: url(../images/tile_back.gif) no-repeat;
padding: 0.5em 0.2em;
font-weight: bold;
color: #A19C86;
height: 1%;
}

6. When adding a product to the cart, where do I change the two gray colors? I want those to be the same background and tile back images I'm using everywhere else on the site.

Again look in your stylesheet.css for the declaration #cartContentsDisplay and change it as necessary.

7. Finally, I'd really like to customize the background images for the search, categories, new products headers, etc with my own images that have the text embedded in them already. Can I do this? If so, where do I need to put the url for the images?

www.zen-cart.com/tutorials/index.php?article=135

[Fae Dragonheart]

Thank you very much!

[clydejones]

Thank you very much!

Glad to help

[clydejones]

Your logo isn't aligning to the center because the declaration in your stylesheet.css needs to be corrected; just add the highlighted portions and that should take care o it.

#logo {text-align: center;}

[silverspring]

Quote:
2. I'd like the side boxes to reach almost to the right and left sides. I don't want that much space between them and the edge of the window.
Open you stylesheet.css and change the following declaration as indicated by the highlight

#mainWrapper {
background-color: transparent;
background-attachment: fixed;
text-align: left;
width: 100%;
vertical-align: top;
border: none;


I'd also like to do this, but where exactly is the stylesheet folder ?

[gjh42]

/includes/templates/your_template/css/stylesheet.css.

If you don't have one, copy it from /includes/templates/template_default/css/stylesheet.css or /includes/templates/classic/css/stylesheet.css.

If you haven't set up a custom template folder yet (as your question implies), see the tutorials on template creation. You can clone the /classic/ folders to start with, if you don't have more specific ideas.

[silverspring]

Yes I do have a template, but when the hosting provider updated for some reason, my template (which was set up by them) lost its lilac (www.embroiderella.com) background. Trouble tickets submitted to the hosts go unanswered so, I am trying to repair it myself. Help would be grately appreciated.

Thanks

[gjh42]

For the width, the above property is the one to edit (use 90% or 95% if you want some body background color to show at the edges of the screen.)

To make the color at the edges lilac instead of pale blue, find this at the top of your stylesheet and edit the background-color:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3300ff;
	background-color: #d9cdd5;
	}

I have already edited it to a reasonable approximation of lilac; tweak as desired.

[silverspring]

Hiya. When I go via the FTP it wont allow me to do it, saying that something or the other is missing. Can I download to my HD, edit it and then transfer it back, hopefully replacing the original ?

Thanks Liz