This page show you how to replace the Joomla!® logo on the "rhuk_milkyway" template with your own logo or banner.

Since there are thousands of different templates with often radically different layouts, we could not create a tutorial to cover replacing the logo or banner on them all. Though we are only covering the process for the "rhuk_milkyway" template, the basic concepts will apply to most other templates. We will also provide notes to help with changing the logos on other templates.

About Logo or Banner

You will need to create or aquire a logo or banner prior to completing this tutorial. The logo we will be replacing on the "rhuk_milkyway" template is 298 pixles wide by 75 picles high. We recommend using a logo with similar dimentions or smaller. If your logo is much wider or higher, it will not fit neatly in the template.

Also, the background behind the logo is not a solid color. A decision must be made whether to use a solid background color behind your logo or a matted transparent background.

For example:

Matted Background

Solid Background

You can use a professional graphic art application like Fireworks or Photoshop to create your banner or logo. There are also free applications like OpenOffice which could work as well. The logo should be in a .jpg format if it has a solid background and a .gif or .png format if it has a matted background.

Contact us if you would like assistance creating a banner or logo.

Upload the Logo or Banner

Step 1
Go to your new Joomla website by typing "www.YOURDOMAINNAME.com" into the address bar of your browser and hitting "Return", if you have not already done so.	Click for Larger Images
Step 2
After entering your domain name and going to your website, you should see an address like this "http://www.YOURDOMAINNAME.com/". At the end of the address, type "administrator" and hit return. This will load the administrative login page.
Step 3
Enter the Username and Password you created in "Step 5 - Set Up Joomla" and click "Login".
Step 4
Before proceeding, open a separate browser window or tab and view your home page by typing "www.YOURDOMAINNAME.com" into the address bar of your browser and hitting "Return".
Step 5
Back on the the Administrative Control Panel window. Go to the "Site" drop down menu and select "Media Manager".
Step 6
Click "Browse" under "Upload File"..
Step 7
Browse to your logo file and click "Open"..
Step 8
Select "Start Upload". The file will upload, then an "Upload Complete" message will appear.

The location we uploaded the logo is in the default media folder for Joomla (/images/), NOT THE TEMPLATE FOLDER. The standard location of a templates logo, banner and other images is in the "images" folder inside the template folder (/templates/rhuk_milkyway/images/). We have chosen to place your logo in the media folder so that you can use that same logo and address with any template and because the media manager does not allow access to the template folders.

Insert the Logo or Banner

Step 1
Select "Template Manager" from the "Extensions" drop down menu.
Step 2
Select the "rhuk_milkyway" radio button then click "Edit".
Step 3
Select "Edit CSS".
Step 4
Select the radio button next to "template.css" and click "Edit"..
Step 5
You will now see the CSS editor. Scroll down until you find the line "div#logo {"
Step 6
Edit the line: background: url(../images/mw_joomla_logo.png) 0 0 no-repeat; so that it says: background: url(../../../images/mylogo.png) 0 0 no-repeat;
Step 7
Select "Save".
Step 8
Go to your new Joomla website by typing "www.YOURDOMAINNAME.com" into the address bar of your browser and hitting "Return". You should see your logo displayed in the header. You may need to refresh the page a few times or reload the browser before the change takes effect.

Congratulations! You now have a new logo or banner displayed on your website.

Let's move on to Chapter 11 - Learn More Joomla