Home Web Development Add a hyperlink to your logo in Joomla!

Add a hyperlink to your logo in Joomla!


By default, some Joomla! templates have the name of the Joomla installation printed in text on the frontpage where a logo can go.  This text is a hyperlink to the website’s HOME.  Most of the time, you will delete the installation name and add your own logo, but now the logo isn’t a hyperlink anymore. To add this functionality to the template, you can do it one of three ways:

1. Add an <A> tag around the logo DIV tag.
     – works, but there have been issues with cross-browser
     – The thing I don’t like about this is it doesn’t change the
        cursor to indicate that you’re on a link.
2. Use Javascript
     – also works, but depends on having Javascript enabled and there have been issues reported with
        cross-browser compatibility.
3. Create a blank transparent image to layer on top of your real logo.
     – The best in my opinion.  Here is how you implement it:
        – Create a blank, transparent image using your favorite graphics program
        – Copy the image to your template images directory and note its location
        – Open the template file called index.php and goto the <div id=”logo”> section.
           – Change your code to look something like this:
              <div id=”logo”>
                 <a href=”../../”>
                                    <img src=”../../templateName/images/logo_transparent.png”>
                 <a href=”index.php”><?php echo $mainframe->getCfg(‘sitename’) ;?></a>
Notes: The Green text may not be present in your template…as noted above, all it does is displays the
                name of your Joomla installation, if you have one.  If you have a logo then you probably
                already deleted the text so don’t worry about this line; it won’t affect anything.
                If you only want a section of the picture to be hyperlinked, then use an image map.

For more reading on the other options, please visit the Joomla! Forums.  Here is one thread dealing with this issue.


Please enter your comment!
Please enter your name here