Change Background Color & More

[asterix]

I changed the style file in includes/templates/classic/css and includes/templates/template_default/css to have a white background but it's still greyish. Are these the wrong files to edit?

I also switched the logo with a taller image (200px). I've updated the dimensions in the header file plus logo.wrapper in the files above but the logo is still bleeding over the cart text and boxes. Can this be fixed so the larger logo displays cleanly?

Thanks!

[gjh42]

If you are using the Classic template, that would be the one and only stylesheet to edit. Never change the files in /template_default/; if you want to customize something, copy it to /your_template/ and edit there.

You should not be using the /classic/ folders directly, either. You need to make your own custom template folder so your changes don't get wiped out in the next upgrade. If you are basing your template on Classic, just copy all /classic/ folders and their files to /your_template/ folders (whatever template name you choose). See the FAQ/tutorials for template creation.

A link to your site will help us give you specific advice.

[asterix]

http://www.equinartsinstitute.com/cart/index.php

[afo]

Get rid of stylesheetOLD.css. Either delete it or rename it stylesheet.css.old.

As Glenn said, you shoudn't edit the files in /classic/ or /template_default/.

To create a very basic custom template (you can build from there), you need:

• includes/languages/YOUR_TEMPLATE/english.php
• includes/languages/english/YOUR_TEMPLATE/index.php
• includes/languages/english/YOUR_TEMPLATE/header.php (to change the logo)
• includes/templates/YOUR_TEMPLATE/template_info.php
• includes/templates/YOUR_TEMPLATE/common/tpl_header.php
• includes/templates/YOUR_TEMPLATE/common/tpl_footer.php
• includes/templates/YOUR_TEMPLATE/images/logo.gif
• includes/templates/YOUR_TEMPLATE/css/stylesheet.css

Anywhere you see a /classic/ folder, you can create a folder for your custom template. You can copy the necessary files from either the /classic/ folder, the /template_default/ folder or the parent folder.

Edit includes/templates/YOUR_TEMPLATE/template_info.php to give your template identifying information so you'll recognize it in the admin under tools->template selection.

[asterix]

Yep, I'll do that.

How about the image issue? Will this be fixed when I create the new Tempate with a new CSS?

[afo]

How odd... it's displaying perfectly in FireFox, but not in IE.

The stylesheet.css is telling the browser

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:200px;
	}

while stylesheetOLD.css is telling the browser

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

That's probably your problem.

[asterix]

The height is 200 so it should allow to view the full image, without bleeding, no?
I also remove the background image.

[gjh42]

I notice that the "E" and the horse's ears are touching the box - some margin on #logoWrapper would help that.

Here is your main problem:

http://www.equinartsinstitute.com/cart/includes/templates/classic/css/stylesheetOLD.css

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5349 2006-12-22 20:34:40Z birdbrain $
 */

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

stylesheetOLD.css is still being applied, and since it comes after stylesheet.css, it is overriding everything you do there.
You need to delete or move stylesheetOLD.css.


...nevermind, afo beat me to it :)

[afo]

The problem is NOT the background image. The problem is you have 2 stylesheets with 2 different heights for the logo. stylesheetOLD.css is telling the browser that your logo is 75px high.

As Glenn pointed out, stylesheetOLD.css is being loaded after stylesheet.css, so the 75px is being used.

[asterix]

Creating a new template apparently fixed it; I say apparently because all the menu boxes are gone. I duplicated the default template folder but I still don't see the boxes. What am I doing wrong?