Skip to content

Narrow screen resolution Wide screen resolution Auto adjust screen size Increase font size Decrease font size Default font size
You are here:Home Page arrow Articles arrow Changing the logo image in a Joomla Theme.
Changing the logo image in a Joomla Theme.
Written by Administrator   
Saturday, 03 February 2007
A short tutorial on replacing an existing image in a theme. If your existing theme has a photo across the top of each page, then you can probably change it to something else to customize your site. The questions are where is the original image and how big is it.

Once you find that original image, you can edit it in photoshop, paintshoppro or any other image program. You can also just trade it in for a new image by coping a new image over the old one and uploading the file to your server.

But you need to replace it with the same type of image. If it is a jpg then use a jpg. If it is gif, use a gif. The reason is that the code may call the image by name like logo.jpg and if you replace it with a different picture logo.gif then it may not find the right image.
So first, find the image. Get a image program to look at the images in the theme folder on your system. We will work with the files on your system rather than the ones that you uploaded to the server. Then once we have them changed, you can upload them later.

So get Irfanview or any other image editor . Photoshop is nice :-)
Find the image in the theme folder or below that looks like the top photo on your page. It may be bigger than you expect.

To modify the image:
In your image editor, make changes, add text , modify color, etc and save the image.

Change the size of the image:
This is harder, you have to edit the CSS or HTML files of the template to change the size of the logo. In the Joomla administration, go to the Site->Template Manager->Site Templates and edit the HTML. Make sure it is writable before you make changes. That may require you to change the permissions on the theme files (css or html) before it will update them after an edit. Search for the name of your logo image. It is most probably in the HTML file. Look for the height and width of the image in that same image line. For example, in my own HTML I see this:

od_displayImage('sitelogo', '/images/logo-DoItYourself', 340, 50, '', '

The 340 and the 50 are the width and height respectively of my logo.

To create a new image:
Find out the resolution of the old image , that is, width and height in pixels. Create a new image with the same pixel dimensions. If you want to make it larger or smaller you will need to modify the html pages (like index.php) in the theme.

Once you have a new image, save it as a gif or jpg or png with the same name as the old file. Upload it to the server into the same location so that it overwrites the old file. Your site should immediately start showing the new image. Refresh the browser to make it reread the page.
 
< Prev   Next >
[ Back ]





Popular Searches
Making Money Online,
Templates,
Get Traffic,
Adwords Training,
AdSense Training,
Affiliate Program,
find niche,