I'm Stuck On Changing My Header!I

I promise I've really spent quite a bit of time messing around with my site and I can't, for the life of me, figure out exactly how to change the top of my page. I'm just used to being able to use one index page to mess around with and not used to all of these php files! (But hey, I'm learning) :smartass:

Here is my VERY stripped site

http://www.scoutsswag.scoutj.com/

I'm just wanting it to look a lot more like this:

http://www.scoutj.com

with a banner similar to

http://www.scoutj.com/knitting/images/new_scout_top.jpg

at the top.

Anyone willing to help a newbie walk through these steps please? Thank you!

And I have even changed the header.php file with the logo.gif and that didn't do anything.

The frustration that you are feeling is normal for people who start down the Zen Cart road. It is a very powerful piece of software that can do an inordinately wide range of things, but takes a bit of getting used to.

scoutj:

I have really looked EVERYWHERE to try and figure out how to alter my header to make it like I want and am not having a lot of luck.
I've spent a few minutes looking at the innards of the Purpleshades template and it isn't easy to achieve what you want, unless you already know a bit about how the template has been constructured. It's that old joke, "if I want to go there, I wouldn't start from here."

You've indicated that you're not new to HTML and web design, so I assume that you're familar with the move away from layout tables towards CSS-based web design. The Purple shades template has been converted by its author (a nice chap called Jolly Jim) from an earlier tables-based version of Zen Cart and still retains many of the inflexibilities that come with that approach.

I always start from something called the template_default, which reflects Zen Cart's current state of evolution with most of the tables stripped out and a significant amount of the customisation done via the stylesheet, and designed a template specifically to help new users of Zen Cart get on this more forward looking path. It's called future Zen and can be downloaded from the link below.

Which is best for you is debateable. I suspect that Purpleshades already has more of what you want in terms of colour and general look, but will be harder to work with. Future Zen would mean starting again with the look from a place further away from where you want to get to, but the jouney would easier and quicker. For example, to deal with the query that started this discussion, to change the future Zen banner to yours would require no more than changing the line highlighted below in its stylesheet to reflect filename of your banner (or changing the banner name to that below)

#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
}
and then putting your image file in the includes/templates/YOUR_TEMPLATE_NAME/images directory, where YOUR_TEMPLATE_NAME would be future_zen or whatever you might choose to call your template directory.

Good luck. I'll be watching out for your posts.

Thank you for taking the time to do this. I'm hoping someone might have played with this template a bit and might know what to do? Fingers crossed or I'm headed over to download the other template.....

I'm adding this in here wondering if this is something I could change?

/HEADER CSS/
/* This controls the layout for the table which contains the logo */
TABLE.header {
background-image: url('../images/hdr_bg.gif');
background-repeat: repeat-x;
background-color: Purple;
border-right: 0px solid Purple;
border-left: 0px solid Purple;
border-bottom: 0px solid Purple

Can I somehow replace that image with my own banner and not have it repeat? I don't know exactly how to do that. I tried and it didn't work~!

The CSS is there to be changed. Try replacing this sections with> scoutj:

I'm adding this in here wondering if this is something I could change?

/HEADER CSS/
/* This controls the layout for the table which contains the logo */
TABLE.header {
background-image: url('../images/YOUR_FILE_NAME.EXT');
background-repeat: no-repeat;
background-color: Purple;
border-right: 0px solid Purple;
border-left: 0px solid Purple;
border-bottom: 0px solid Purple

I'm pretty sure I did exactly that and then it stopped the other file from repeating (in the navigation bar) and messed up the whole blog. I'll try it again and see but I'm pretty sure it didn't work. Thank you again!

scoutj:

I'm pretty sure I did exactly that and then it stopped the other file from repeating (in the navigation bar) and messed up the whole blog. I'll try it again and see but I'm pretty sure it didn't work. Thank you again!Yes. I'm afraid that each page element can only have one background image, so by replacing the one attached to header, you will stop ithe original image from displaying.

There are three main alternatives1. Attach your background image to something else instead
2. Amalgamate your logo and banner into a single image to be displayed where your logo is at the moment
3. edit the table in the tpl_header.php directly to force your image in where you want it

I'll need to find where that logo is. I also don't know if I understand how to force the image to work but I'll go see what I can find. trots off to finish espresso

By viewing the source I see where the banner css is but when I go to the stylesheet I don't see it. That's where it'd be right?

OKay, go look now. I think I might finally be on to something! Possibly!!!??? I wonder if I can center that image in the tpl_header php?

NOw I need to go back to my designer and ask her to make me a logo in a gif!

OKay, I was able to get the bigger image there but am now working on centering it. Having a hrd time with that. I see it here:

Should messing with that center it somehow? I changed the 720 to a bigger size but that didn't do it. I also changed the left to center and that didn't do it. I'm not great with tables.....obviously!

scoutj:

OKay, I was able to get the bigger image there but am now working on centering it. Having a hrd time with that. I see it here:

<td width="156" valign="top"><a href="./"><img src="includes/templates/purpleshades/images/sitelogo.gif" alt="Home Page" border="0"></a></td> <td width="720"> <table align="left" border="0" cellpadding="0" cellspacing="0" width="720"> <tr>

Should messing with that center it somehow? I changed the 720 to a bigger size but that didn't do it. I also changed the left to center and that didn't do it. I'm not great with tables.....obviously!Hi Scoutj

The problem here is that the table structure containing the cell that your image is in is rather complicated. I expect it worked well to achieve the original asymetric look, but isn't well geared up to the centering that you're trying to achieve.

You have one narrow column of cells to the left of your image and up to three to the right pushing back against your image, one of which seems to be foxed at 720px, so your image really has nowhere to go.

To me this is layout table hell and illustrates why I try to work exclusively with CSS -based designs as much as possible. Frustrating though I know this will be to hear, I believe that you're digging a deeper and deeper hole for yourself here, and would recommend going the CSS route.

I got it.... didja see?

Now I'm having problems with it linking up with Paypal. I posted a post in the general questions if you feel like helping me out more! :)

I lucked out and a webdesign friend was able to tell me what to do! So it looks good now but just have a few more tweaks and I think I might actually have a shop!

Thanks so much for ALL of your help!