How to Change the Header in Joomla 3.0

[cammot]

I would like to change the 'Header' in my Joomla 3.0 website. I am currently using the Beez3 template. I would like to change the header with an image of my own.

Can anyone point me to where I could find instructions on how to do this the right way.

Thanks

[imanickam]

The header image file to be replaced is is personal2.png located in the directory /templates/beez3/images/personal.

[Ravius]

I have just replaced that png but the front page of the site has not updated. Any ideas?

[imanickam]

Ravius:

What is your site's URL?

Clear the Browser Cache and see what happens.

[Ravius]

Hi

The URL is : http://www.campervan-dvd.co.uk

Tried Firefox & Chrome it hasnt changed

[imanickam]

You have changed the Template Color from Personal to Red. When you change the Template Color such as Red, you have to select an image file for the option Header Image.

[Ravius]

Ah yes, then I guess that will be it. How do i remove the text thats now visable over the image?

Many thanks

[imanickam]

Suggest reviewing the contents of the options Site Title and Site Description that are available in the same page where you have changed the Template Colour.

[Ravius]

Great thanks.

[imanickam]

On a second thought, reviewed your site again with the header image showing.

I believe that in your case, you have no value in those options and you have campervan-dvd.co.uk as the Site Name (in the Global Configuration.)

Edit the file position.css located in the directory /templates/beez3/css and the following css entry, change the value of the css attribute display from block to none.

Code: Select all

#logo {
    margin-top: 0;
    margin-left: 10px;
    display: block;
    padding: 1em 20px 20px 10px;
    width: 425px;
    font-weight: normal;
    line-height: 1em;

}

[Ravius]

Fantastic, Many thanks. Time for some reading I think.

[Appia]

On a second thought, reviewed your site again with the header image showing.

I believe that in your case, you have no value in those options and you have campervan-dvd.co.uk as the Site Name (in the Global Configuration.)

Edit the file position.css located in the directory /templates/beez3/css and the following css entry, change the value of the css attribute display from block to none.

Code: Select all

#logo {
    margin-top: 0;
    margin-left: 10px;
    display: block;
    padding: 1em 20px 20px 10px;
    width: 425px;
    font-weight: normal;
    line-height: 1em;

}

The logo image on my website is smaller than the logo header. So the blue background color shows up along edges.
Could you pls show me how to change the codes in CSS so the the blue bacgournd color is removed and the logo is centered in the header?

[Tomtech]

I got rid of the padding and kept my header and logo.

Use this in /public_html/templates/beez3/css/position.css

Code: Select all

#logo {
    margin-top: 0;
    margin-left: 0px;
    display: block;
    padding: 0em 0px 0px 1px;
    width: 425px;
    font-weight: normal;
    line-height: 1em;

}

Edited: I tried all 0px but my site seemed to slow down so I went with 1px so that the normal padding routine runs with minimal impact.