How To Replace A Joomla Logo With A Custom Logo In 20 Easy Steps 5

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.

Create New Image

Create New Image

 

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.

GIMP Main Window And Text Tool Options

GIMP Main Window And Text Tool Options

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.

The Layer dialogue

The Layer dialogue

 

 

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.

 

Select Flip Vertically

Select Flip Vertically

12.Select the move tool again, and move the flipped text, so that is is placed exactly under the other text:

 

Aligning The Text

Aligning The 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.

Adding A Layer Mask

Adding A Layer Mask

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).

Gradient Tool, FG And BG Colour

Gradient Tool, FG And BG Colour

 

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.

Applying The Gradient

Applying The Gradient

 

 

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.

Saving The Image

Saving The Image

 

Export Settings.

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:

Exporting to PNG

Exporting to PNG

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

 

  • willaharrington

    My spouse and I stumbled over here coming from a different web address and thought I might as well check
    things out. I like what I see so now i’m following you.
    Look forward to looking into your web page repeatedly.

  • antonetta

    Hey There. I found your blog using msn. This is an extremely
    well written article. I’ll be sure to bookmark it and return to read more
    of your useful info. Thanks for the post. I’ll certainly comeback.

  • corinne

    What’s up to all, how is everything, I think every one
    is getting more from this web site, and your views are
    nice in favor of new users.

  • kiafeetham

    Oh my goodness! Awesome article dude! Thank you, However I am having difficulties with your RSS.
    I don’t know why I am unable to join it. Is there anyone else having the same RSS
    issues? Anybody who knows the answer will you kindly respond?
    Thanx!!

  • k.walch

    Great post.