I'm Stuck On Changing My Header!I

[scoutj]

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)

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.

[kuroi]

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.

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.

[scoutj]

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.....

[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/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~!

[kuroi]

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

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

[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!

[kuroi]

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 alternatives

1. 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

[scoutj]

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*

[scoutj]

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?

[scoutj]

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!