Time for action—Replacing logo using the header.tpl file

You already got yourself familiar with the CSS files. Now, we are moving on to another important file that you may have to use to edit, as an alternative from your back office.

The logo can be replaced by uploading it through the server into an appropriate folder ('../img/logo.jpg'). It's best if you can overwrite the original file using a different file with the same filename.

1. Look up your /theme1/header.tpl

   <!-- Header -->
     <div>
       <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
       <div id="header">
         {$HOOK_TOP}
       </div>
     </div>

2. logo.jpg is the filename for the logo on your top-left corner. Changing the logo picture can also be done by modifying this file to the filename of the new logo, say logo2.jpg.

   

3. To edit the logo properties on the top...