An Easy Way To Create A Logo Design
Amazing logos can be deceptively simple, so for inexperienced eyes, they seem simple to make. The symmetrical logo design that you see every day is the result of intrusive settings. Experienced designers are so experienced because they can make their designs to seem easy :)
However, hiring a designer to manage the entire process is not always the best option. Perhaps because you work with a limited budget or already have a reliable concept in mind.
In any case, I’d consider two options then:
- Online logo makers. It takes a while to find a decent one tho.
- Or search for existing directories, e.g. see these free internet logos for your blogs
Usually, the first step in adjusting your Joomla template is to change default template's logo image with logo of your 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.
Picture 1
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).
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.