Loading...
JoomlaJoomla SetupJoomla Tutorials

Joomla 1.6 Beez20 Template – How to Make Logo Clickable

Joomla 1.6 help – There was a question regarding the Beez_20 Joomla template in my comments. The question was – How to make the Beez_20 logo clickable? How to change the logo to a link so it when clicked will always return to my homepage?

Below I will step you through how to make that change.

1.  Login to your FTP manager or backend cpanel and access your file manager.

2.  Go to your template directory and edit your index.php file.  For example:

/home/myrootdir/public_html/joomla163/templates/Beez_20/index.php

3.  Find the Beez20 logo and a link to your homepage.  For example I want to create a link to my cmsmind.com

Find this code:

<img src=”<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>”  alt=”<?php echo htmlspecialchars($templateparams->get(‘sitetitle’));?>” />

Add the code in red: (slight modification-thanks sean for the update)

<a href=”http://www.cmsmind.com”><img src=”<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>”  alt=”<?php echo htmlspecialchars($templateparams-> get(‘sitetitle’));?>” style=”border: none;” /> </a>

Save your file and refresh your Joomla website.  When you hover your mouse over your logo you should see your website link in the status bar.  When you click on the logo, it should link you back to your homepage.

Hope that helped!

Elaine

Elaine@cmsmind.com

15 comments
  1. Sean

    Thank you Elaine for all of your help!!! Worked like a charm!!! I now have a logo that’s able to be clicked and take you back to the homepage 🙂

    *** style=”border: none;” can you modify the html text in your post to that( there is a space between the border: and none), otherwise you will still get the border (quick google search led me to that solution cause I was still showing the border)*

  2. Sergey

    Elaine, could you help me to make not logo, but header clickable? Because of I placed my logo in header.jpg.

    The path:
    ..\templates\beez_20\images\nature\header.jpg

    Defined in ..\templates\beez_20\cssnature.css

    #header
    {
    background:#185359 url(../images/nature/header.png) bottom left no-repeat;
    position:relative
    }

    1. Elaine

      Hi Sergey,

      I’m creating a post to respond to your comment. Essentially, I would just replace the logo image with your header image. You don’t really need both. The header is a background image and can’t be linkable. It’s like the background image/color on a normal website (in my case I have a white background with no image). After you replace your logo image with your header image you can follow the steps above. Also make sure the filenames are the same.

      Thanks for your visit,
      elaine

      1. Sergey

        Exactly!
        Thank you very much, Elaine!
        I made the logo.png with transparency, but its size was too big. Then I pasted logo into my backgroud, without transparency. to achieve the smaller size. But I didn`t guess that new header can be used as logo)

        Thanks for your site and quick answer!

  3. Charles

    Hi Elaine,
    Thank you for your great article – would you be kind enough to help me please? – I’ve tried

    <a href=”baseurl ?>”><img src="baseurl ?>/” />

    When you click on the logo, it repeat the url twice for example: “http://localhost/WIP/demo3/WIP/demo3”

    Many Thanks for your Help and kind Regards

    Charles

  4. Maciej

    Hi! I’ve got problem with beez20 too. I would be really happy, if you can help me with it. My problem is:
    How can i change all background images? How you can see on this picture: I can’t fill others fields with my image, because I can’t find it 🙁 And can you give me an advice how to change buttons color too? Bacause white color looks bad with mine web colors. Hope, you will can help me, Maciej

  5. Andrew

    Hi,

    I am trying to click on and it would go back to homepage. How do I do that? Because i cant find below link in the index.php file, using joomla 2.5.8 :

    <img src=”baseurl ?>/” alt=” get(‘sitetitle’));?>” style=”border: none;” />

    Please kindly advise.

    Thanks,
    Andrew

    ——————————————————————————————————————-

  6. Benedikt Björnsson

    In Beez3 temp/personal you have the logo and site description which you can modify from the template manager. The description phrase besides the image while it is just one line.
    I have two lines in h3 so the text happens under the image.
    Can you tell me how to wrap the description-text to right-top of the logo?
    The width of the page is not enough for one line of text and the image so it floads beneath the logo

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload