Adding additional images to the main header

[shanesoine]

I need to add additional images to my main header and using firebug see that a clever zenner did this!

<div id="logoWrapper">
<div class="back" id="logo"><a href="http://www.aaa.aa/"><img height="138" width="316" title=" title " alt="title" src="includes/templates/custom/images/title.jpg"></a></div>
<div class="forward"><a href="http://www.aaa.aa/index.php?main_page=corporate_sales"><img height="138" width="322" title=" title " alt="title" src="includes/templates/custom/images/logosecond.jpg"></a></div>
<div id="logothird"><img height="40" width="256" title=" title " alt="title" src="includes/templates/custom/images/logothird.jpg"></div>
<br class="clearBoth">
</div>

and if I look for div id="logowrapper" using developers tools in admin it directs me to
/includes/templates/template_default/common/tpl_header.php

not a natural born coder so when I go there bit overwhelmed - it all seems to be calling on other stuff or directing to other stuff:

<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

Where should I be looking??

[stevesh]

Not sure what you're asking. You can just add HTML to template files, as the example you referenced did:

<div id="logothird"><img height="40" width="256" title=" title " alt="title"src="includes/templates/custom/images/logothird.jpg"></div>

just adds an image to the header, and giving it its own id allows you to style it or move it around by editing that id in the stylesheet.

[gjh42]

You would want to be adding the new div just after the closing </div> of the id="logo" div. Count tags if necessary to be sure you are in the right place.

If you want the other images to be home links as well, you can make an exact copy of the logo div code (changing the id to logoSecond and HEADER_LOGO_IMAGE to 'your_image_name.gif'). If you don't want links, you can subtract all of the <a...> </a> tags in the copy.

The example you give has the second logo linking to the corporate_sales page instead of home, while the third logo is not a link.

[shanesoine]

Hi Guys, many thanks for your help, just lost on which file I should be making these changes in?

[gjh42]

/includes/templates/your_template/common/tpl_header.php.

[shanesoine]

Hi sorry I know you show a lot of patience with people like me but may I just confirm that I would be getting rid of this

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

and replacing it with the div class info for my chosen images??

Feels wrong

or would I add another div after it?

While i am on the subject of things i struggle with need to add some script to the head and body of my index.php (home page) but cant see the tags

[shanesoine]

Spotted something i may have done wrong - I only have a common folder in my template_default folder - should I have made a copy of common and put it in mytemplate - I am using classic and have not re named it yet

[gjh42]

If you want multiple images, you need to add the new div(s) after the original logo div.
Never change a file in a /template_default/ folder; make a copy of it in a /your_template/ folder (or /your_template/common/ in this case), and edit that.

[shanesoine]

Thanks so much for the wonderful clear instructions, makes such a difference to understanding whats going on. Do you think I should change the name of classic, read somewhere it could pose a problem if I ever work up the courage to up grade. If so what would be the overall implications?

[shanesoine]

Ok in principle that went quite well, I put the following in:

<div id="middlelogo"><img height="240" width="480" title=" title "
alt="title" src="includes/templates/custom/images/middlelogo.png"></div>
<div id="xmaslogo"><img height="240" width="158" title=" title "
alt="title" src="includes/templates/custom/images/xmaslogo.png"></div>
<br class="clearBoth">
</div>

So while both images come up, the xmaslogo one sits underneath the middlelogo

How would I make it sit on the right