Header problem...

[Brian Flanagan]

Hi all,

Okay, I give up...I'm stuck! I'm very new to Zen Cart and don't claim to be an expert in any way, but I thought I was really starting to get the hang of it. I get the whole override thing and have it all set up and have set up pretty much everything else without too much of a problem. Well, no problems that I haven't been able to fix without the FAQ's, this forum and Google...till now.

When I started, I decided to use a template to make the whole thing easier as I didn't know what I was doing. I chose the 'Free Yellow' template and although I've had to make some changes to it, have found it ok...till now.

Here's my problem...

I want to change the header image. Simple? That's what I thought and was why I was leaving it till after all the 'hard stuff'. I have been working on this problem for close to 24 hours now, but just can't solve it or find any other postings that help.

I thought it would be as simple as creating a file by the same name as the header file in use (header-bg.jpg) with the same dimensions and then saving it on top of the one included with the template (includes\templates\free_yellow\images).

What happened first was that both headers were displaying together (or so I thought). Seems that there was some type of background colour behind the header which is why I thought that some of the original header was still showing. I managed to find the answer to this (well it worked anyway) in this forum and fixed it by changing the following:

File: includes\templates\free_yellow\css\stylesheet_new.php

Changed from:

#headerContent {
background:#f1d600 url('../images/header-bg.jpg') center right no-repeat;
padding:10px;
}

Changed to:

#headerContent {
background:url('../images/header-bg.jpg') center left no-repeat;
padding:10px;
}

Now, I had just my header displayed, but it was cut off and had the company name on it.

Company name. I figured this was easy to get rid of and went straight to:

includes\languages\english\free_yellow\header.php

The line I thought might be a problem was: define('HEADER_ALT_TEXT', ''); however I seem to have already taken the name out, so I searched around some other files to try and work out where it was coming from. Eventually worked it out - it was coming from the Zen Cart Admin (Configuration > My Store > Store Name). I didn't really want to remove this, but did just to see if this was where the text was coming from - it was. When it was removed, the header shrunk even more than the cut off image that was already there (I think the header area is based on the size of the text in this section and because there was no text, it shrunk even more. Anyway, I put the store name back and then did the following to remove it from the header.

File: includes\templates\free_yellow\css\stylesheet_new.php

Changed from:

#nameWrapper a, #nameWrapper a:visited {
font-size:40px;
text-decoration:none;
color:#fff;
font-weight:normal;
}

Changed to:

#nameWrapper a,
#nameWrapper a:visited {
display:none;
}

Now the text is all gone (and still in Admin), but the header is not showing the full header image that I'm trying to show. I'm beginning to think that using a template was a very bad idea! lol

Anyway, what I would love to know is how/where I can change the header size so that my whole image (height) will display? I have gone back to the beginning incase I've made a mistake somewhere and will paste the stylesheet below in its original form as that is what I am now working from. If you think the problem is in another file, then please let me know which one and I'll paste that here for you to look at.

Thanks for taking the time to read this and reply (if you do). I hate asking for help as I like to work things out for myself and not bother others, but this one has got me stumped.

Thanks!

Brian

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2005 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_new.css 3286 2006-03-28 01:14:04Z drbyte $
*/

body {
color:#000000;
font:.8em/1.6 "georgia", serif;
background-color:#fff;
margin:0 15px;
}

a img {border: none; }

a:link {
color:#aaa000;
text-decoration:none;
font-weight:bold;
}

a:visited {
color:#888000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color:#ccc000;
text-decoration:underline;
}


h1 {
font-size: 1.4em;
color:#333;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.2em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}

TEXTAREA {
margin: auto;
display: block;
width: 95%;
}
input:focus, select:focus, textarea:focus {
background: #F0F8FF;
}
FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}
LEGEND {
font-weight: bold;
padding: 0.3em;
}

LABEL, h4.optionName {
line-height: 1.25em;
padding: 0.1em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
font-size: 0.95em;
margin: 0.2em 0.5em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

LABEL.inputLabel {
font-size: 0.95em;
width: 10em;
float: left;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}

P, ADDRESS {
padding: 0.5em;
}
ADDRESS {
font-style: normal;
}
.clearBoth {
clear: both;
}
HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}
.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}
.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}
.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}
/*wrappers - page or section containers*/
#mainWrapper {
text-align: left;
vertical-align: top;
}


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

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #csNotifications, #navEZPagesTOCWrapper {
margin: 10px 0px;
width: 46%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/* HEADER */
#navMainWrapper {
}

#navMainWrapper a:link , #navMainWrapper a:visited {
color:#aaa000;
}

#navMainWrapper a:hover {
text-decoration:underline;
}

#headerContent {
background:#f1d600 url('../images/header-bg.jpg') center right no-repeat;
padding:10px;
}

#nameWrapper {
padding:10px 0 10px 30px;
}

#nameWrapper a, #nameWrapper a:visited {
font-size:40px;
text-decoration:none;
color:#fff;
font-weight:normal;
}

#taglineWrapper {
font-size:20px;
padding:10px 0 10px 60px;
margin-top:-30px;
}

#navEZPagesTop {
font-weight: bold;
text-align:center;
font-size:1.2em;
}

#navEZPagesTop a {
color:#fff;
}



.navMainSearch {
margin:0 10px 0 0;
line-height:0;
float:right;
}


/*navigation*/

.navSplitPagesResult {
margin: 0.5em;
font-size: 0.9em;
}
.navSplitPagesLinks {
margin: 0.5em;
font-size: 0.9em;
}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
font-weight: bold;
height: 1%;
width: 100%;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
}

#headerWrapper #navMain ul li {
border-right:1px solid #666;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border:1px solid #dfdfdf;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
#navBreadCrumb {
border-bottom:1px solid #bfbfbf;
padding: 0px 0 5px 0;
margin:3px 25px 0 25px;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

#productDescription, .shippingEstimatorWrapper {
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.1em;
font-size: 0.9em;
}
.advisory {}
.important {
font-size: 1.1em;
}
.notice {}
.rating{}
.gvBal {
float: right;
}

#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

#siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
margin-bottom:10px;
}

/*Shopping Cart Display*/
#cartAdd {
text-align: center;
margin: 1em 0 1em 0;
background-color:#f8f8f8;
border:1px solid #dfdfdf;
padding: 1em;
float:left;
clear:right;
}

.productListing-heading , .tableHeading th{
background:transparent url('../images/sidebox-title-bg.gif') 0px 18px repeat-x;
font-size:1.0em;
}

.cartTableHeading, #cartSubTotal {
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}
.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}
#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
color: #660099;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

#cartAttribsList {
margin-left: 1em;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}

/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxContents {
padding: 0 5px 5px 5px;

}

/* BOXES */

#navColumnOne, #navColumnTwo {
padding:10px;
}

.centerColumn {
padding: 0 25px 0 25px;
}

h2.centerBoxHeading, .productListing-rowheading, TR.tableHeading {
background:transparent url('../images/sidebox-title-bg.gif') 0px 15px repeat-x;
font-weight:bold;
font-size:1.1em;
margin:0;
}

h2.centerBoxHeading {
padding-left:10px;

}

.productListing-rowheading, TR.tableHeading {
height:2.0em;
line-height:2em;
}

.centerBoxWrapper, .tabTable {
padding: 0px;
height: 1%; /*do not remove- IEhack*/
margin-bottom: 1em;
line-height:1.4;
}

.sideBoxContent {
line-height:1.4;
padding:5px;
margin-bottom:15px;
}


h3.rightBoxHeading, h3.leftBoxHeading {
background:transparent url('../images/sidebox-title-bg.gif') 0px 15px repeat-x;
line-height:1.4em;
text-align:left;
margin:0;
padding:0;
letter-spacing:.5px;
}

h3 label {
font-size:1.0em;
}

h3.rightBoxHeading, h3.rightBoxHeading a, h3.leftBoxHeading, h3.leftBoxHeading a {
color:#000;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
text-decoration: underline;
}


/* PRODUCT LISTING */

.productListing-rowheading a {
color:#000;
}

.productListing-data img {
padding:8px;
}

/* PRODUCT INFO */
#productDetailsList, #productDetailsList li {
list-style-type:none;
margin-left:0;
padding-left:0;
}

/* FOOTER */

#authorLink {
text-align:center;
font-size:.9em;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navNextPrevWrapperTop, #navNextPrevWrapperBottom, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/*misc*/
.back {
float: left;
}
.forward {
float: right;
}

.bold {
font-weight: bold;
}

/*.rowOdd {
background-color: #F8F8F8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F4F4F4;
height: 1.5em;
vertical-align: top;
}*/

.productListing-odd td, .productListing-even td, .rowOdd td, .rowEven td {
border-bottom:1px solid #d8d8d8;
}

CAPTION {
/*display: none;*/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}


#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
background-color: #ffffff;
}

[misty]

First, you have to make sure that template you
are using is suitable for zencart version installed.
Otherwise, you are at disadvantage straight away..
Second..Posting all your code helps very little, when
you have not quoted your zencart url.
From what can see in your stylesheet, certain css is missing for
zencart versions 1.35/1.36 and upwards.
But without seeing actual site..

[Brian Flanagan]

Misty,

Wow, that was quick...thanks!

Just checked versions and it seems that the template I'm using is compatible up to 1.3.5. Also checked what ZC I'm using and it is version 1.3.7.1 :-( Could that really be making that much of a difference?

As I mentioned before, I have gone back to the beginning, so there's nothing on the site except for the header I want (well, part of it!). I figured I'd do that bit first and then do everything else (which I know works!) The URL is http://www.imaginart.com.au

Brian

[misty]

template I'm using is compatible up to 1.3.5. Also checked what ZC I'm using and it is version 1.3.7.1 :-( Could that really be making that much of a difference?

Yes it does make a great deal of difference.
If you are just starting out, suggest you install and use
latest zencart version 1.3.8.1..Currently you are already
2 versions back..will save you a lot of time and trouble
later on...then when you have done that, pay a visit to
http://(sorry, site offline)/138/index.php
Top right hand box..template switcher..
All those templates listed are also free, and available
in downloads section..
http://www.zen-cart.com/index.php?ma...ex&cPath=40_53
lists zencart templates with version they were designed for..

[Website Rob]

Whatever CSS file you are using, I would suggest the following at the bottom:

#headerContent {
width: 838px;
height: 173px;
padding:0;
background:#f1d600 url('../images/header-bg.jpg') no-repeat;
}

You will then have to resize your image with a Graphics program and reupload it. Right now your Header image is 883px wide but your Template looks to be only 838px.

[Brian Flanagan]

Misty - thanks for the advice. For now I'm going to stick with what I have as I need to get this up as soon as I can and this was one of the last things I needed to do to finish it off. I will work out how to upgrade everything sometime in the future when I understand this even better.

Website Rob - you're a champion...that fixed it!

Brian