Change Joomla Template Logo with your Logo Image - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Usually, the first step in adjusting your Joomla template is to change default template's logo image with logo of you company or your site.

Find Out Logo Image Name

All our templates usually use logo image with name "logo.png" or "logoX.png". The "X" is usually a number. This the case only with templates that have different logo images for different color schemes.

Anyway, you should find out first what is the image name that your template uses. In Firefox, right-click on the logo image (picture 1). From the menu select option View Image. It will show you the logo image only so you can see its name and location. Logo image(s) are located in the folder /templates/hot_templatename/images.

Joomla logo change 1
Picture 1

Joomla logo change 2
Picture 2

 

Find Out Logo Image Dimensions

Now you know the logo image your template uses. You should create new logo with the same dimensions (width and height). To find out width and height of your logo image, right-click on the logo image and select option View Image Info. New window will open and you can see logo width and height (Picture 3).

Joomla logo change 3
Picture 3

You can create your logo image now with the dimensions that you know now. This can be done in any image editing software, such as Photoshop, Fireworks...

The logo image creation process is not theme of this tutorial. The important thing is the logo image dimensions and logo image name.

Once you have your new logo image, please use any FTP software such as Filezilla to upload it on your server. You should upload it to the folder /templates/hot_templatename/images and overwrite existing default logo image.

 

Change Logo Image Dimensions

This is the harder part. You will need fair knowledge of HTML and CSS in order to accomplish this yourself. So, if you don't have it, we recommend you to use default logo dimensions. Logo dimensions are selected carefully by our professional designers. If you change it, you may degrade overall template look.

If you decide to proceed though, you should go to Extensions > Module manager > Logo. If you have an older template and if there's no module with name Logo, please open template's index.php file (in folder /templates/hot_templatename).

Make difference between Joomla's index.php file that's located in the root folder of your site and template's index.php file. You don't need to edit Joomla's index.php ever.

Find part that contains logo image tag. It usually looks like this:

 
<div class="logo">
<div class="logo_pad">
<a href="index.php"><img src="<?php echo $template_path ?>/images/logo<?php echo $templateStyle; ?>.png" width="288" height="79" alt="Hot Cars" /></a>
</div>
</div>
 

There you should change values of width and height parameters of the image tag with your own values. Save and upload the index.php file. If you are reducing the logo size, you are done! If you are enlarging it, please continue with tutorial.

Next step is to edit CSS stylesheet layout.css (located in /templates/hot_templatename/css) and find logo class. It usually looks like this:

.logo {
height:79px;
width:288px;
float:left;
}

Change the height and width values there as well, and save and upload the file. Test your template and if it looks broken, please edit template's index.php file again. Find line

$searchWidth = $templateWidth - 290;

Please increase value of X (290 in this sample) with difference between original logo widht and edited logo width. In example, if original logo width was 288 and you increased it to 388, difference is 100. So you should increase value of X for 100 (it will be 390 in this sample). Save and upload file again and you should be done now.

Links, Partners and Social Media