We want to replace the ZenCart logo with our own and to remove the sky blue header graphic.

Using Firebug as described in previous tutorial, we see that the sky blue graphic is a background image of the div with id "logoWrapper".

because the actually logo graphic does not span the whole width of the page.

The actual logo is in the div with id of "logo".

1. First, we remove the sky graphic by searching for CSS rule with "logoWrapper" in the stylesheet.css and delete the background image.

2. Now to alter the logo graphic, we do a global file search for ...

id="logo"

And find the following code is responsible for the logo graphic...

in includes/templates/template_default/common/tpl_header.php

From Firebug, you know that the logo graphic is an <img> tag wrapped by an <a> tag.

The <img> and <a> tags in the HTML output that you saw in Firebug are generated by ZenCart's PHP server-side code.

PHP code is interspersed with the HTML, when you see <?php that indicates the start of PHP code. When you see ?> that indicates the end of the PHP code.

Here the PHP code is calling ZenCart function zen_image to construct the <img> tag. And it is calling the function $template->get_template_dir to retreive the template directory to construct the path of location of the actual logo graphics.

You also see a lot of PHP constants defined (those names in all-caps). If you search for those in

<strong>includes/language/english/example/header.php</strong>

as we did in last tutorial, you will find where to replace the text.

HEADER_ALT_TEXT is the alt attribute value for the logo image. Set that value to the name of your website plus any tag line for SEO purpose.

HEADER_LOGO_IMAGE is the filename of the logo graphic. You see that it is currently "logo.gif". The easily thing to do to replace the logo.gif with your own graphic of the same dimension and filename in

includes/templates/example/images/logo.gif

where example is your template name.

But sometimes that is not possible. For example, you might want to give the graphic a better SEO friendly filename or if the dimensions has to be different.

Then you have to change the values according in ...
HEADER_LOGO_IMAGE, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT.