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>

**Berserker** · 10 May 2007, 03:45 PM

Originally Posted by gws76

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?

Hello,

Why don't you use php include to add your Image Ready header? It's what i did for mine and it works.

Regards

**gws76** · 10 May 2007, 07:38 PM

Originally Posted by gjh42

The logo is inside #logoWrapper with no slop, so no aligning in #logo will do anything. You need to give #logoWrapper {margin: auto;}.

By "text" do you mean the text on your tab images? That is not real text, just a picture of text, and can't be affected by stylesheet hover rules. If the tab images were background images called in the stylesheet, you could substitute an image with red text on hover.

A couple of points - it would be much easier to help if I could see your actual site. Can you post a link, or is it on a local pc now?
When you post code examples, it works better to put code tags around them so they don't take up acres of space, and also keep the color coding to make it easier to read. Use these [ php ] and [ /php ] (lose the spaces).

Originally Posted by Berserker

Hello,

Why don't you use php include to add your Image Ready header? It's what i did for mine and it works.

Regards

Glen,

Well I put in the code in #logowrapper and still no go. I tried both margin: auto; and text-align: center; This is what it looks like below. For the tabs, slices logo_2-logo_10 are the tabs. How do I make the tab images background images in the stylesheets and substitute the image with red text on hoover. The site is www.sullivanvitamins.com

Berserker,

Sorry I don't understand can you explain more. Header looks fine but I wanted it to be centered and to have the hoover effect for the text on the tabs.

PHP Code:



#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    text-align: center;
    }

    
#logoWrapper
{position: relative;
width: 800px;
height: 165px;
}

#logoWrapper
{text-align: center;
}

**gjh42** · 10 May 2007, 08:05 PM

You have this declaration which appears after your new #logoWrapper declaration and overrides the margin: auto; in it:

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

Eliminate

#logoWrapper,

from the second one.

Make the first one

#logoWrapper
{position: relative;
width: 800px;
height: 165px;
margin: auto;
}

and scrap the separate
#logoWrapper
{text-align: center;
}

**gjh42** · 10 May 2007, 08:34 PM

For the hover... this is going to get into a lot of work, and will require four different background images for each button when you include inactive page, inactive page hover, active page, and active page hover.

There will be a better and much simpler way of doing the whole thing, but it will involve scrapping most all of the header work you have done so far.

Thread: Where do you paste image ready sliced header code?

Thread Tools

Search Thread

Display

Hybrid View

Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Re: Where do you paste image ready sliced header code?

Similar Threads

v139f Where do I paste the tracking code and what to fill in for the variables?

Where to paste SnapEngage code?

Where do you input Google tracking code ?

Pay Pal buttons where to paste the code?

where do you paste ssl certificate code

Posting Permissions