Beez_20 Template Joomla Help – This post is in response to a question asked earlier in post about “How to Make the Logo Clickable“.   If you incorporated your logo into your header file, that really means you don’t need to have both.  You can have one or the other.  I would opt to leave the logo and not the header image.

At a high level overview, this is what we will be doing.  Assuming you have already uploaded your image file to your webhosting fileserver, here is how you can replace your logo image with your header in the Beez20 template.

1. Change your Beez20 Logo in the Template Manager
2. Find the css File in webhosting file manager
3. Edit the css File in webhosting file manager
4. Make your logo clickable

Here we go:

1.  Change your Beez20 Logo in the Template Manager

• Login to your Joomla 1.6 administrator backend.
• Click on Extensions, Template Manager
• Click and edit the template you are using – Beez2 – Default
• Under Advanced options, Logo = Select your image file (in the next window you also have the option to upload a file)
• Click on Save & Close.

Please note that if you click on the ‘Select” logo and cannot find your logo there, you probably uploaded your file through FTP file manager and didn’t put it in a directory that the Joomla image selector can see.  Joomla image selector can only see image files located in your ‘image’ directory in your root.  So always upload pictures to that directory.

/<your Joomla 1.6 installation foldername>/images

For example, mine would be:

/Joomla16/images

2.  Find the CSS file in FTP File Manager

• Login to your FTP file manager
• Edit your css file – depending on which template you choose

either

../templates/Beez_20/css/nature.css

or

/templates/beez_20/css/personal.css

3.  Edit the CSS File in FTP File Manager

• For the personal.css – Find the line

.logoheader
{

background:  #0c1a3e  URL(../images/personal/personal2.png) no-repeat bottom right ;

• Change it to:

.logoheader
{

/* background:  #0c1a3e  URL(../images/personal/personal2.png) no-repeat bottom right ; */

OR

• For the nature.css – Find the line:

#header
{
background:#185359 url(../images/nature/header.jpg) bottom left repeat-x ;

• Change it to:

#header
{
/* background:#185359 url(../images/nature/header.jpg) bottom left repeat-x ;  */

4. Make Your logo clickable

• Follow my the steps here from my post.

Hope that helps!

Elaine
Elaine@cmsmind.com