Change Front Page Logo Graphic in Joomla 1.5

Published:
Updated:
Change Joomla Logo Graphic

This tutorial goes over the steps to change the Joomla Logo in the template you are using. For this example we will be assuming you are using the rhuk_milkyway Joomla Template which is installed by default.

You will first need to locate the logo file.  If you stored the template files on your Hard Drive you can open the file graphic file from that location so you can edit.  The file is located under the templates folder:

\templates\rhuk_milkyway\images\mw_joomla_logo.png

Open up the file in your graphics editor such as Paint or Photoshop.

You can make your changes to the logo file.  Once you are done you can Save As and change the name like mw_newlogo.png.  

If you already have a logo file you can upload it to your images folder under the template.  Just make a note of the file name and the graphics width and height as you will need that info later.

Once you have your files completed you need to upload to your web server.  Make sure you upload to the images folder under the template you are using.  For our example we are using the rhuk_milkyway template so we would put in the following directory:

\templates\rhuk_milkyway\images

Now that your logo files are complete and uploaded to your website you need to modify your style sheet to point to your new image file.

Logon to your Joomla Administrator interface of your website.  This can be found by going to http://www.yoursite.com/administrator

Select Extensions > Template Manager to bring up the template configuration screen.  

In this Template Manager, select the template and then click the Edit button

The parameters screen will now display.  From here you can launch the CSS editor by clicking the Edit CSS button on the top right

Now you will need to edit the template.css file.  Select it and click the Edit button.

Locate the div#logo entry.  Alter the filename to reflect the name of your new logo file.  Remember that filename is case sensitive so make it identical to the actual file name.  Also if you are using a file with a different file size change the width & height attributes of the element to match your graphic file.  

Click the Save button

Now the new graphic will show up on your page.
1
5,616 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.