How to change Logo on your Jooma template manually 

How to change Logo on your Jooma template manually

This is a quick 7 steps to change Logo on your Jooma template manually

1. Choose a template color in Joomla CMS backend. For example, you can choose black color, blue or any other color you want.

2. Create your own logo to use on the website, remember to save your logo in PNG file extension.
For example: anb-logo.png

3. Upload your logo to the folder: /templates/yourtemplate/images
You can FTP to your hosting and do the upload.

4. Find index.php in the folder: /templates/bj_jupiter/ and open it (or whatever Joomla template from us).

5. Edit the your logo name in the index.php file:
+ Find the text: “bg-logo.png” in the index.php file
+ Replace the text ‘bg-logo.png’ by your logo name. For example: replace “bg-logo.png” by “anb-logo.png”

6. Check your appearance:

Remember that the default logo size is 135 x 43 px.

If your logo and the default logo have the same height, you will see it perfectly fit to the template, otherwise it may appear like example below if the height of your logo is greater than 43px.

(This logo is in 72 px high)

7. Edit the CSS of the template to fit your higher logo
In this example, the difference between the new logo and the default one is 72 – 43 = 29px. If you still want to keep your logo size constant, we need to modify the CSS.

7.1 First, we need to change the Padding-top:
The default of Padding-top is 20px, if you wish to change it to 5px, please do this step:
+ Find index.php in folder: /templates/bj_jupiter/ and open it.
+ Find the DIV named BJ_Logo in that index.php file
+ Edit the padding:20px 0 0 0 to padding:5px 0 0 0

Then see your new appearance: the grey area now becomes thinner

7.2 Changing the HEIGHT of the HEADER (black part background)
If the logo still out of the background, you can change the height of the Header:
+ Find black.css in the folder: /templates/bj_jupiter/css and open it.
+ Find the text “#BJ_Logo_Search”
+ The default height for the Header is 70px, add the text “height:77px;” on the DIV css (see example below).

Before adding:

After adding:

Now let see your new appearance:

7.3 Changing the padding-top of the MAIN MENU:

Because you have just changed the height of the Header so the MAIN MENU will not fit the header anymore. Therefore you should change the padding top of the MAIN MENU:

+ Find layout.css in folder: /templates/bj_jupiter/css and open it.
+ Find the text “#BJ_MainMenu” in that file, then add the text “padding-top:7px;” on the DIV css. (Because in this example, you changed the Height from 70px to 77px)

Before adding

After adding

You have finished the last step of this tutorial, congratulation, now you can see your new appearance with the new fitted logo ?

Don’t forget to check out Venus – a simple Joomla 2.5 template for business.