Layout Question

[dfontana]

Please take a look at the site I am working on. It is http://i1-der.com/store

I am having a problem with the header, the complete banner is not being shown completely either because the box it is contained in is too small, or the navcat area is too big and covering it up. Is there a setting that can set the sizes in the admin, or is there a php/html/css file somewhere that I can modify to change the sizes?

Thanks in advance

[Sketchy]

Minor problem with a simple fix.

In that current template's stylesheet.css, find:

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

Change the above value(in red) to look like the below:

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

[dfontana]

Minor problem with a simple fix.

In that current template's stylesheet.css, find:

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

Change the above value(in red) to look like the below:

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

Thanks SKetchy, that did the trick, I appreciate. Its been slow learning how to modify the Zen-Cart stuff, but the wife and I are getting there. (I hope)

ANy comments on what the site looked like?

[Sketchy]

You're welcome. I totally understand how overwhelming things can be in the beginning. After all, I started out the same way.

Certainly, thanks for asking. I think this would blend everything together:

To change the green bottoms and grey box borders to match the red in the tops, find in that same "stylesheet.css" as before:

.centerBoxWrapper {
	border: 1px solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
	}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #9a9a9a;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 1px solid #9a9a9a;
	border-bottom: 5px solid #336633;
	margin-top: 1.5em;
	}

Adjust the values(in red) to: ff1213, don't forget the "#" pound/number character or the semicolons at the ends.

I think that's a good start. If there's anything else, don't hesitate to ask.

[dfontana]

You're welcome. I totally understand how overwhelming things can be in the beginning. After all, I started out the same way.

Certainly, thanks for asking. I think this would blend everything together:

To change the green bottoms and grey box borders to match the red in the tops, find in that same "stylesheet.css" as before:

.centerBoxWrapper {
    border: 1px solid #9a9a9a;
    height: 1%;
    margin: 1.1em 0;
    }
 
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #9a9a9a;
    background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    }
 
.leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #9a9a9a;
    border-bottom: 5px solid #336633;
    margin-top: 1.5em;
    }

Adjust the values(in red) to: ff1213, don't forget the "#" pound/number character or the semicolons at the ends.

I think that's a good start. If there's anything else, don't hesitate to ask.

Thanks again Sketchy, that does look a lot better. Now I am trying to find all the text to be uniform in color, ie: category side box is green some of the side boxes are blue. I'd like to make all the side boxes to be uniform, been looking in the stylesheet.css but haven't found them yet.

[Sketchy]

You're welcome. The changes you seek are in the stylesheet.css, but I'll make them unhidden for you.

Depending upon what color you want the active links, you can adjust them here:

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}

However, that won't affect the category box or visited links. For the visited links, you'll see it's code just below the above code block. Also, hover color is just below the prior.

To play with the category font colors, you'll have to scroll further down the stylesheet.css to:

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #008000;
	text-decoration: none;
	}
A.category-links, A.category-links:visited {
	color: #004080;
	text-decoration: none;
	}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
	color: #FF0000;
	text-decoration: none;
	}

If you want hover effects in the category box, no problem either. You can manipulate that block of code to render as all other links by additional declarations. Let me know if you'd like too, once you chosen the overall text colors.

Speaking of color, you can experiment with hex values here.