How To Replace A Joomla Logo Image In The Milkyway Template
1. Creating the logo
In this guide, we will be replacing the Joomla! logo by with a custom logo. Let’s start by creating the custom logo. We will use the free program the GIMP (www.gimp.org) to do this, so do download and install it, if you haven’t already.
1. Open the GIMP, and click on file > new.
2. Choose 298 pixels for the width of the image, and 75 for the height. Also, expand the advanced options by clicking on the little ‘plus’ left of it.
3. Change “fill with option” to transparency.
Note: If you use the Beez template, you should set width to 300px and height to 97px.
If you use another template, you can check yourself: surf to your site, right click on the logo you want to replace, and select properties. There you can see the width and height.
4.Now a new window containing the transparent image will open up. The first thing we will do is adding some text.
5.Select the text tool in the GIMP’s main window. Now click in the left upper corner of your image window, and type in your logo’s text in the dialogue box, and close it.
7.Now double click the text-tool, and the text tool’s properties dialogue will open up. Change the size to an appropriate value, and also change the font and text colour if you like, but this is not really necessary.
|Note: You can see the image change while you adjust the text’s size. If you don’t see anything happen, click on the text and try again.|
You might want to adjust the position of the text, using the move tool.
Note: When using the move tool, make sure you click on the letters, not on the space between them.
8.Now that we have the text, we will add a special effect: a mirror effect. Make sure you selected the text layer in the layer dialogue.
9.Click on the duplicate layer button, as indicated on the screenshot.
Note: The layer dialogue can be opened by pressing CTRL+L.
11.Now go to the menu bar in the image window, and select Layer => Transform => Flip vertically as below.
12.Select the move tool again, and move the flipped text, so that is is placed exactly under the other text:
13. Now we will add a little fade effect. Make sure you selected the flipped text layer, and then go to Layer => Mask => Add layer mask. In the dialogue that now appears, choose the “white (full opacity)” option.
14. Now select the Gradient tool, and make sure your foreground colour is set to black, the background colour is set to white (see note), and the active gradient has to be set to FG to BG (=black to white).
Note: The fore- and background colours can be modified by double clicking them.
15. Now draw the gradient from bottom to top, as shown in the screenshot. The text will fade away at the bottom. You can add other effects if you like.
Note: If you aren’t satisfied with this simple mirror effect,
feel free to add other effects. You can find tons of tutorials
on Google or Youtube by searching for “GIMP logo tutorials”
16. If you are satisfied, you should select layer => merge down, and repeat this until you have only one layer remaining. Then choose layer => Layer to image size.
17. Now the only thing we have to do is saving your logo. Choose File => Save as…, and in the dialogue that appears, type in the file name “mw_joomla_logo.png”. Then select a location, and click on save.
18. Now a new dialogue opens, and use the default options, but make sure to check the options I chose the “Exporting to PNG” screenshot:
Now we are ready to replace the Joomla! logo with our own.
2. Replacing the Joomla! logo
For this step, you can use your own favourite FTP client. I will use FileZilla.
If you need help with FileZilla, read their tutorial.
19. Start your FTP client, connect to your host, and browse to your Joomla! map. Now browse to the folder
“templates/rhuk_milkyway/images/”. It would be wise to rename the file on the server that is named “mw_joomla_logo.png”, to “mw_joomla_logoold.png”, so that you can restore it later, but this is not required, you can delete it as well.
20. Now upload our logo, and make sure it is named “mw_joomla_logo.png”. If you now surf to your Joomla!, the logo will be changed!
Note: If you use Beez, the location of the logo will be “/templates/beez/images/logo.gif”, instead of “templates/thuk_milkyway/images/mw_joomla_logo.png”. If you use another template, you can look the logo’s location up by rightclicking on the logo and selecting properties.
Note: If you still see the old logo, you should clear your browsers’ cache. If you don’t know how to do this, check out this page