How to Change the Header in Joomla 3.0

Everything to do with Joomla! 3.x templates and templating.
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
cammot
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Tue Sep 01, 2009 9:00 pm

How to Change the Header in Joomla 3.0

Postby cammot » Sun Jan 13, 2013 3:53 pm

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

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 24304
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to Change the Header in Joomla 3.0

Postby imanickam » Wed Jan 16, 2013 6:08 am

The header image file to be replaced is is personal2.png located in the directory /templates/beez3/images/personal.
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

Ravius
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Jul 06, 2011 2:10 pm

Re: How to Change the Header in Joomla 3.0

Postby Ravius » Thu Mar 07, 2013 3:23 pm

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

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 24304
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to Change the Header in Joomla 3.0

Postby imanickam » Thu Mar 07, 2013 3:26 pm

Ravius:

What is your site's URL?

Clear the Browser Cache and see what happens.
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

Ravius
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Jul 06, 2011 2:10 pm

Re: How to Change the Header in Joomla 3.0

Postby Ravius » Thu Mar 07, 2013 3:30 pm

Hi

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

Tried Firefox & Chrome it hasnt changed

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 24304
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to Change the Header in Joomla 3.0

Postby imanickam » Thu Mar 07, 2013 3:45 pm

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.
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

Ravius
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Jul 06, 2011 2:10 pm

Re: How to Change the Header in Joomla 3.0

Postby Ravius » Thu Mar 07, 2013 3:54 pm

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

Many thanks

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 24304
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to Change the Header in Joomla 3.0

Postby imanickam » Thu Mar 07, 2013 3:57 pm

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.
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

Ravius
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Jul 06, 2011 2:10 pm

Re: How to Change the Header in Joomla 3.0

Postby Ravius » Thu Mar 07, 2013 4:02 pm

Great thanks.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 24304
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How to Change the Header in Joomla 3.0

Postby imanickam » Thu Mar 07, 2013 4:07 pm

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;

}
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged

Ravius
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Jul 06, 2011 2:10 pm

Re: How to Change the Header in Joomla 3.0

Postby Ravius » Thu Mar 07, 2013 4:36 pm

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

Appia
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Fri Jul 12, 2013 8:55 am

Re: How to Change the Header in Joomla 3.0

Postby Appia » Wed Jul 17, 2013 10:47 am

imanickam wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Thu Mar 24, 2011 6:50 am

Re: How to Change the Header in Joomla 3.0

Postby Tomtech » Fri Jan 17, 2014 1:51 am

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.
Last edited by Tomtech on Fri Jan 17, 2014 2:43 am, edited 1 time in total.


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: muratyil and 10 guests