Where do you paste image ready sliced header code?

**gws76** · 3 May 2007, 12:16 AM

The header I designed in photoshop I used the slice tool in image ready to allow for hyperlink capabilities. Now I want to upload via ftp to my server to replace the current header. Where do I paste this code for the image ready slices? Also I have six different headers with the same set up (the tab is colored different depending on what page you are on. How do I set up so the header will change depending on the page you are on?

**cam_oai** · 3 May 2007, 08:43 AM

if u can coding php, use if else to change the header. at the page's top, define a name so the if else knows where ur pages are

**gws76** · 3 May 2007, 07:48 PM

Originally Posted by cam_oai

if u can coding php, use if else to change the header. at the page's top, define a name so the if else knows where ur pages are

I'm sorry but I don't understand what you are saying. I need to find the location to paste this html code for my header.

**gjh42** · 3 May 2007, 08:20 PM

You would put a test before the header image display similar to

PHP Code:


if ($current_page_base == 'index') {
    $header_img = 'header_index.gif'
    }
elseif ($current_page_base == 'product_info') {
    $header_img = 'header_productinfo.gif'
    }
etc...

and then use $header_img where the image filename should go:

PHP Code:


<img src="' . $header_img . '">

This will probably need to be tweaked a bit to fit your actual situation. If you are using plain HTML, you will need to add <?php and ?> tags.

**gjh42** · 3 May 2007, 08:26 PM

Note - there is also a method for using CSS to change the header background image... lots of possibilities.

**gws76** · 3 May 2007, 10:13 PM

Originally Posted by gjh42

You would put a test before the header image display similar to

PHP Code:


if ($current_page_base == 'index') {
    $header_img = 'header_index.gif'
    }
elseif ($current_page_base == 'product_info') {
    $header_img = 'header_productinfo.gif'
    }
etc...

and then use $header_img where the image filename should go:

PHP Code:


<img src="' . $header_img . '">

This will probably need to be tweaked a bit to fit your actual situation. If you are using plain HTML, you will need to add <?php and ?> tags.

Originally Posted by gjh42

Note - there is also a method for using CSS to change the header background image... lots of possibilities.

Sorry can you give me a little more coaching. Right now my header image is named logo.gif. The new headers are composed of 24 slices (which are gif images) individually for each header. There is a sample below of the html code for my home page header. Which php file I'm I actually modifying to insert this code and where exactly in the php file will I paste it? I can paste you php file for whatever one you would need if you need to look at it.

When I do a search via the develpers tools for logo.gif it shows up in

/home/content/v/i/t/vitamins6/html/admin/includes/languages/english.php[FONT=&quot]

[/FONT]/home/content/v/i/t/vitamins6/html/includes/languages/english/classic/header.php

/home/content/v/i/t/vitamins6/html/includes/languages/english/header.php[FONT=&quot]

And [/FONT][FONT=&quot]<div id="logoWrapper"> shows up in [/FONT]
/home/content/v/i/t/vitamins6/html/includes/templates/template_default/common/tpl_header.php

<HTML>
<HEAD>
<TITLE>home</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<STYLE TYPE="text/css">

</STYLE>

</HEAD>
<BODY BG##############################>

<DIV ID="home-01">
<IMG SRC="images/home_01.gif" WIDTH=18 HEIGHT=176></DIV>
<DIV ID="home-02">
<IMG SRC="images/home_02.gif" WIDTH=761 HEIGHT=110></DIV>
<DIV ID="home-03">
<IMG SRC="images/home_03.gif" WIDTH=21 HEIGHT=176></DIV>
<DIV ID="home-04">
<IMG SRC="images/home_04.gif" WIDTH=761 HEIGHT=9></DIV>
<DIV ID="home-05">
<IMG SRC="images/home_05.gif" WIDTH=622 HEIGHT=2></DIV>
<DIV ID="home-06">
<IMG SRC="images/home_06.gif" WIDTH=75 HEIGHT=32></DIV>
<DIV ID="home-07">
<IMG SRC="images/home_07.gif" WIDTH=64 HEIGHT=57></DIV>
<DIV ID="home-08">
<IMG SRC="images/home_08.gif" WIDTH=140 HEIGHT=55></DIV>
<DIV ID="home-09">
<IMG SRC="images/home_09.gif" WIDTH=59 HEIGHT=23></DIV>
<DIV ID="home-10">
<IMG SRC="images/home_10.gif" WIDTH=29 HEIGHT=55></DIV>
<DIV ID="home-11">
<IMG SRC="images/home_11.gif" WIDTH=83 HEIGHT=23></DIV>
<DIV ID="home-12">
<IMG SRC="images/home_12.gif" WIDTH=9 HEIGHT=55></DIV>
<DIV ID="home-13">
<IMG SRC="images/home_13.gif" WIDTH=93 HEIGHT=23></DIV>
<DIV ID="home-14">
<IMG SRC="images/home_14.gif" WIDTH=4 HEIGHT=55></DIV>
<DIV ID="home-15">
<IMG SRC="images/home_15.gif" WIDTH=94 HEIGHT=23></DIV>
<DIV ID="home-16">
<IMG SRC="images/home_16.gif" WIDTH=12 HEIGHT=55></DIV>
<DIV ID="home-17">
<IMG SRC="images/home_17.gif" WIDTH=83 HEIGHT=23></DIV>
<DIV ID="home-18">
<IMG SRC="images/home_18.gif" WIDTH=16 HEIGHT=55></DIV>
<DIV ID="home-19">
<IMG SRC="images/home_19.gif" WIDTH=59 HEIGHT=32></DIV>
<DIV ID="home-20">
<IMG SRC="images/home_20.gif" WIDTH=83 HEIGHT=32></DIV>
<DIV ID="home-21">
<IMG SRC="images/home_21.gif" WIDTH=93 HEIGHT=32></DIV>
<DIV ID="home-22">
<IMG SRC="images/home_22.gif" WIDTH=94 HEIGHT=32></DIV>
<DIV ID="home-23">
<IMG SRC="images/home_23.gif" WIDTH=83 HEIGHT=32></DIV>
<DIV ID="home-24">
<IMG SRC="images/home_24.gif" WIDTH=75 HEIGHT=25></DIV>

</BODY>
</HTML>

**gjh42** · 3 May 2007, 11:10 PM

You will want to make edits in the  section of /includes/templates/your_template/common/tpl_header.php for the div code; I would guess that you have no mechanism for choosing which set is used, so it would probably be best to use the switch code I posted above, but wrapping one whole set of divs in each if() { } or elseif() { }.

Now how do you determine where the links are?
And for that matter, how many of those slices are different between pages? Only a half dozen or so, I would think. Best to have the static ones before the if section or after it, so only the changed ones need to be messed with. That will cut the size of the file in half or so.

The CSS should go in your stylesheet, and you should scrap all the <html> <head> <body> tags etc, because you are already in an HTML document and don't want to send headers twice.

**gjh42** · 3 May 2007, 11:21 PM

A PS:
I have never used this HTML-style method of layout and don't much care for all the slices; it seems easier to me to have one large background image with a half dozen link divs positioned on it, and select the background image to be used based on the current page.

**gws76** · 5 May 2007, 06:31 AM

I ended up just going with the one header that the tabs are the same color for now because when I loaded it up with the the six different ones they all were loading at the same time and blending into each other. The first cut kept repeating all the way down the side until the first logo. Couldn't figure out how to make it load just the one header for that page. I will have to return to that headache later. In header.php I replaced the logo.gif with this

define('HEADER_LOGO_IMAGE', 'logo_01.gif, logo_02.gif, logo_03.gif, logo_04.gif, logo_05.gif, logo_06.gif, logo_07.gif, logo_08.gif, logo_09.gif, logo_10.gif, logo_11.gif, logo_12.gif');

because my logo is comprised of 12 cuts. This seem to solve the problem with the zen cart logo.gif in the template_default from showing up.

Now I have my header with the links on it working properly but now in Firefox it is overlapping my mainwrapper where the home and login links are. The first cut appears to be below the mainwrapper where it should be with the rest of the header pushed up. I need to get the whole header below the mainwrapper like it was before.

In internet explorer the header completely covers the main wrapper and also most of the categories side box and the welcome sentence on the index page.

What I'm leaving out?

**gws76** · 5 May 2007, 11:15 PM

Well I was able to get the header to move down below the main wrapper by inserting {} in the stylesheet one in the beginning and one in the end. Below is what it looks like now.

Now my problem is that the cuts are no longer together in one piece but are seperated aligned to the left .

Also it has this hyper link centered at the top just past the header. It is the phrase that would show up when you put your mouse over the logo. When you put your mouse over the hyperlink it displays that message. I need that message to appear when you put your mouse over the header and it has a capital S after the coma which needs to be changed to lower case s.

{

<STYLE TYPE="text/css">

</STYLE>

}