How to make header clickable

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
User avatar
lividsnails
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 124
Joined: Mon Jan 07, 2008 4:46 pm

How to make header clickable

Post by lividsnails » Thu Feb 14, 2008 9:00 pm

This would seem to be a very simple thing but I can't figure out how to do it in joomla. I want to have the header/logo banner at the top of my site be clickable so that no matter what page a user is on, if they click the header they go back to the main page. Can someone tell me how to do this please?

User avatar
lividsnails
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 124
Joined: Mon Jan 07, 2008 4:46 pm

Re: How to make header clickable

Post by lividsnails » Fri Feb 15, 2008 5:36 pm

update: I think I found what I need to edit, I'm just not sure how to edit it..

I think I need to look at the index.php file of the template I'm using, right?

This little snippet of code here:

"<div id="logo"><img src="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/images/<?php echo $tmpl_season; ?>/joomla_logo.png" alt="" title="" /></div>
<?php endif;?>
</div>

That's it isn't it? Can anyone tell me how to stick a link in there?

User avatar
lividsnails
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 124
Joined: Mon Jan 07, 2008 4:46 pm

Re: How to make header clickable

Post by lividsnails » Fri Feb 15, 2008 6:36 pm

Please forgive the third post here but I cannot find the Modify post button.

I figured this out. For any other newbies like me who don't know stuff like this here's how to edit that snippet of code and make your header image clickable:

<div id="logo" onclick="location.href='http://YOUR URL'"; style="cursor: pointer;"><img src="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/images/<?php echo $tmpl_season; ?>/YOUR IMAGE" alt="" title="" /></div>

ranger29
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Feb 11, 2008 8:43 pm

Re: How to make header clickable

Post by ranger29 » Tue Jul 15, 2008 8:15 pm

Thank you for posting what finally worked for you. I had been googling this for two days, to no avail. I have a clickable header now! Thank you. :)

User avatar
nesrulz
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Jul 18, 2008 1:13 pm
Location: Zemun
Contact:

Re: How to make header clickable

Post by nesrulz » Fri Jul 18, 2008 1:21 pm

Thx lividsnails!

Serbian Racing Team @ www.SERT-LFS.net

User avatar
raulbcordoba
Joomla! Explorer
Joomla! Explorer
Posts: 299
Joined: Mon Aug 28, 2006 5:32 pm

Re: How to make header clickable

Post by raulbcordoba » Fri Jul 18, 2008 3:18 pm

Wouldn't be better to just add an anchor <a> to your header image than rather use javascript?

:)

User avatar
nesrulz
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Jul 18, 2008 1:13 pm
Location: Zemun
Contact:

Re: How to make header clickable

Post by nesrulz » Fri Jul 18, 2008 5:13 pm

btw, how i can remove this popup menu from IE on my header?
This happen after adding this code...

Code: Select all

<div id="logo" onclick="location.href='http://YOUR URL'"; style="cursor: pointer;"><img src="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/images/<?php echo $tmpl_season; ?>/YOUR IMAGE" alt="" title="" /></div>
Image

Opera and FF work fine (of course), without popup menu...
Serbian Racing Team @ www.SERT-LFS.net

User avatar
raulbcordoba
Joomla! Explorer
Joomla! Explorer
Posts: 299
Joined: Mon Aug 28, 2006 5:32 pm

Re: How to make header clickable

Post by raulbcordoba » Fri Jul 18, 2008 5:26 pm

Hi,

Perhaps you can try to add the header image as a background of the Div container of that area, then the IMG tag won't be there for IE to show you that ugly/funny option menu.

Best,
Raul BC.

8)

User avatar
nesrulz
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Jul 18, 2008 1:13 pm
Location: Zemun
Contact:

Re: How to make header clickable

Post by nesrulz » Fri Jul 18, 2008 7:06 pm

OK. :)
Serbian Racing Team @ www.SERT-LFS.net

tulkur
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Jan 30, 2009 4:37 pm

Re: How to make header clickable

Post by tulkur » Fri Jan 30, 2009 4:47 pm

Finally, after Googling for a good solution to this problem, I finally found yours. I have now tried, I think, 10 different approaches to making the header clickable, but they either didn't work, or they worked, but added extra, unwanted space to the front page underneath the header. This little baby did the trick - thank you so much!

ScoobyStew82
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Jan 30, 2009 5:39 pm

Re: How to make header clickable

Post by ScoobyStew82 » Fri Jan 30, 2009 5:59 pm

I haven't tried this snippet of code yet because I want to ask if it will make just the logo section of my header image clickable? My header is a big image and not all of it needs to be clickable.

Any thoughts?

-Stew

endurelife
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Apr 09, 2009 1:43 pm

Re: How to make header clickable

Post by endurelife » Wed Apr 29, 2009 5:08 pm

Um ya that is a ton more work and much more complicated.

add this to your header div....
onclick="location.href='http://siteaddress/';" style="cursor: pointer;"

so it should look like this when done

<div id="header_img" onclick="location.href='http://siteaddress/';" style="cursor: pointer;">

make sure to put your url and your div proper id. mine looks like this...

<div id="header" onclick="location.href='http://hobab.endurelife.com/';" style="cursor: pointer;">

Hope that helps and makes it easier.

dustin
http://hobab.endurelife.com

jeremykei
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Jun 28, 2009 7:45 am

Re: How to make header clickable (and with URL per image)

Post by jeremykei » Sun Jun 28, 2009 8:25 am

Here's a minimalistic lazy-man's edition, affects only index.php, leaves other template files alone.

1. Add this to index.php, just before the header image div.

Code: Select all

<?php
        $hdimg_fp = $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header');
        $hdimg_id = substr($hdimg_fp, -5, -4); // assumes jpg, gif, png, etc dot + 3-letter ext 
?>
2. Update the header image div with following code:

Code: Select all

        <div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $hdimg_fp ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>; cursor: pointer;" onclick="location.href='<?php echo 'header'.$hdimg_id; ?>'">
3. Here's the important part - set an alias or link to a page on your portal named "headerX" where X = 1, 2, 3, etc. So anyone who clicks on the image will be directed to a page that matches the header image they clicked on.

Hope this mesh-up helps somebody.

Cheerio,

- J
Last edited by pe7er on Fri Dec 31, 2010 10:23 am, edited 1 time in total.
Reason: Manual signature has been removed. Please use the forum signature instead.

TerribleTim
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Nov 01, 2010 3:40 pm

Re: How to make header clickable

Post by TerribleTim » Fri Nov 05, 2010 10:17 pm

Ok, so if you can make the whole header image clickable to return to the main url, how about a way to make the header image an image map so that I can have part of the image return to the main url and another part of the same image go elsewhere?

I know how to make an image map and have made it work in an article, but I need a way to do it in the header image. My new web page design is pretty much hinging on this one problem I can't seem to solve. Any advice?

User avatar
MeanCatCoffee
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Oct 23, 2010 8:23 pm

Re: How to make header clickable

Post by MeanCatCoffee » Sun Dec 12, 2010 3:50 am

I'm trying to figure out where to add this code. I open the index.php file in the template folder and I just don't see which part needs to be modified. The name of my header file is header_03.png. Sorry to be so dense:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />

<!-- This so you can see the css styles in Dreamweaver,  you can delete this link once editing your template is complete, or leave in-->
<?php /*?><link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/template.css" rel="stylesheet" type="text/css" media="all" /><?php */?>

<?php if ($this->countModules('hornav')): ?>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>
<?php endif; ?>

<?php 
if($this->countModules('left') == 0) $contentwidth = "100";
if($this->countModules('left') >= 1) $contentwidth = "80";
?>

</head>

<!--[if IE 7]>
<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/ie7.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.addEvent('domready', function(){
   var menu_li_els = document.getElementById('hornav').firstChild.childNodes;
   for(var i=0;i<menu_li_els.length; i++) {
      menu_li_els[i].insertBefore(document.createElement('div'), menu_li_els[i].lastChild);
   }
});
</script>
<![endif]-->

<body class="background_<?php echo $this->params->get('template_background'); ?>">
<div id="wrapper">
        
         
    
        <div id="header"></div>
        <?php if ($this->countModules( 'hornav or search' )) : ?>
        <div id="topmenu">
        	<div id="hornav">
            	<jdoc:include type="modules" name="hornav" />
            </div> 
            <div id="search"><jdoc:include type="modules" name="search" /></div>   
        </div>
        <?php endif; ?>
        
       
  <div id="maincontentwrapper">
  <div id="content_header">
  
        <?php if ($this->countModules( 'showcase' )) : ?>
            <div id="showcase">
                <jdoc:include type="modules" name="showcase" />
            </div>    
        <?php endif; ?>
        
        <?php if ($this->countModules( 'left' )) : ?>
        <div id="leftsidebar">
            <jdoc:include type="modules" name="left" style="xhtml" />
        </div>
        <?php endif; ?>

        <div id="maincontent<?php echo $contentwidth; ?>">
 
          <div class="inside">  
          <div class="message">
				<?php if ($this->getBuffer( 'message' )) : ?>
 					<jdoc:include type="message" />
				<?php endif; ?>
			</div> 
        <?php if ($this->countModules( 'user1 or user2' )) : ?>
                 <div>
                     <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                         <tr>
                         <?php if ($this->countModules( 'user1' )) : ?>
                            <td valign="top"  width="50%"> 
                            <div class="topmodules">  
                              <jdoc:include type="modules" name="user1" style="xhtml" />
                            </div>
                            </td>
                         <?php endif; ?>
                         
                         <?php if ($this->countModules( 'user2' )) : ?>
                            <td valign="top"  width="50%">   
                           <div class="topmodules">
                              <jdoc:include type="modules" name="user2" style="xhtml" />
                            </div>
                         </td>
                         <?php endif; ?>
                           </tr>
                       </table><br />
                </div>
		 <?php endif; ?>
         
         	

         <jdoc:include type="component" />
            
         <?php if ($this->countModules( 'bottom1 or bottom2' )) : ?>
                 <div>
                     <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                         <tr>
                         <?php if ($this->countModules( 'bottom1' )) : ?>
                            <td valign="top" width="50%"> 
                            <div class="topmodules">  
                              <jdoc:include type="modules" name="bottom1" style="xhtml" />
                            </div>
                            </td>
                         <?php endif; ?>
                         
                         <?php if ($this->countModules( 'bottom2' )) : ?>
                            <td valign="top" width="50%">   
                          <div class="topmodules"> 
                              <jdoc:include type="modules" name="bottom2" style="xhtml" />
                            </div>
                         </td>
                         <?php endif; ?>
                           </tr>
                       </table>
                </div>
		 <?php endif; ?> 
        </div></div></div></div>       
        
          <div id="bottom_container">
          
          </div> 
			 <div id="end_bottom_container">
             <?php if ($this->countModules( 'footer' )) : ?>
                <div id="footer">
                	<center><jdoc:include type="modules" name="footer" style="xhtml" /></center>
                </div>
          <?php endif; ?>    
             <center><p><a href="http://www.meancatcoffee.com">Website designed by Mean Cat Coffee</a></p></center>	 
           </div>  
        	            
</div>
</body>
</html>

Dux12
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Mar 29, 2011 5:26 pm

Re: How to make header clickable

Post by Dux12 » Tue Mar 29, 2011 5:29 pm

Greetings,

All of your tips are cool, but I have a different problem :)

I want to make my header as a clickable picture, but with 2 elements... the left one leads to one category, and the other one to the other (wine tasting and tourism)

Is this possible?

I'm a noob so please be gentle :-[

User avatar
GandalfGrey
Joomla! Guru
Joomla! Guru
Posts: 723
Joined: Tue Mar 25, 2008 8:18 pm
Location: Sweden / Haninge

Re: How to make header clickable

Post by GandalfGrey » Tue Mar 29, 2011 8:49 pm

Dux12 wrote:Greetings,

All of your tips are cool, but I have a different problem :)

I want to make my header as a clickable picture, but with 2 elements... the left one leads to one category, and the other one to the other (wine tasting and tourism)

Is this possible?

I'm a noob so please be gentle :-[
You can use the img attribute usemap for that. For more information see here
“We can't solve problems by using the same kind of thinking we used when we created them."

aravindha
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Fri May 21, 2010 4:25 pm

Re: How to make header clickable

Post by aravindha » Tue Aug 16, 2011 3:31 pm

I have a question; might be off-topic, so pl. bear with me on this.

In my website, I want to change one part of the header that I have to a new one. Right now it is five different sets of images flashing every 2-3 seconds. (each frame has more than 1 image). Example is this site http://www.suncomputereducation.com, but mine has more than one image per frame, flashing every 2 seconds or so. I am changing one frame of the flash file on top, so if i have say 5 frames (with 5 images each), i am changing one of the frames. I now have the changed header file with the updated images for that frame.

I updated the header.psd file, and saved it as for web and devices, and have it in my desktop.

Now comes the second problem.

As dumb as it may sound, i forgot where i got it from. I tried using Filezilla and Dreamweaver FTP, but when i go to MY SITE-> HTML -> TEMPLATES -> i don't see any header file there, and no header files anywhere else. And i don't seem to be able to download the entire site through FileZilla FTP Client. I know i'm missing something, so please guide me here.

sarahlou2288
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Aug 15, 2011 6:44 am

Re: How to make header clickable

Post by sarahlou2288 » Sun Sep 11, 2011 1:32 pm

Hello,

In response to the solution in the post second from the top, I'm trying to make my header clickable. I'm not sure how this site was set up and I'm just helping out with occasional changes but when I go into edit index.php, the 'logo' section looks like this before:

<div id="logo"></div>

I replace with the suggested fix:

<div id="logo" onclick="location.href='http://www.bumitsehatbali.org'"; style="cursor: pointer;"><img src="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/images/<?php echo $tmpl_season; ?>/header_bg.jpg" alt="" title="" /></div>

and I can click on the header yet it overlays a second header image on top which looks bizarre! I guess I need to change something else in the code but I have no idea what. Any help would be fantastic. http://www.bumisehatbali.org

Thanks, Sarah
You do not have the required permissions to view the files attached to this post.

User avatar
GandalfGrey
Joomla! Guru
Joomla! Guru
Posts: 723
Joined: Tue Mar 25, 2008 8:18 pm
Location: Sweden / Haninge

Re: How to make header clickable

Post by GandalfGrey » Sun Sep 11, 2011 7:11 pm

One way to do it is to change this

Code: Select all

<div id="header">
  <table cellspacing="0" cellpadding="0" style="float:right; height: 248px; width:620px;">
    <tr>
      <td style="text-align: center; vertical-align: middle;">
        <div id="logo"></div>
      </td>
    </tr>
  </table>
  <div class="clr"></div>
</div>
to this

Code: Select all

<div id="header">
  <a href="http://www.bumisehatbali.org/"></a>
</div>
and add this to the file templates/siteground-j15-63/css/template.css

Code: Select all

#header > a{
  display: block;
  height: 251px;
  position: absolute;
  width: 940px;
}
and to be safe you should add position: relative; to the #header rule in the same file
“We can't solve problems by using the same kind of thinking we used when we created them."

bogdan69
Joomla! Intern
Joomla! Intern
Posts: 96
Joined: Sun Aug 07, 2011 11:24 am
Location: Romania
Contact:

Re: How to make header clickable

Post by bogdan69 » Thu Sep 15, 2011 12:13 pm

The best way to have a clickable header is with CSS. Just set the a tag to display as block, set a height and width (the same as your image) and you have the simplest and best way to make a clickable header or logo with Joomla or any other script for that matter.
Custom CMS Themes http://www.mlbthemes.com

hankin
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Thu Mar 08, 2012 2:40 pm
Location: England
Contact:

Re: How to make header clickable

Post by hankin » Tue Mar 13, 2012 4:45 pm

Hi guys, I can't see an answer to how can you make a header/logo image a clickable url. People starting to transgress off topic. How can you simply add a url to your header/logo image? (Simplist method would be appreciated). Thank you.

elisape
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Mar 09, 2013 11:43 am

I have the same problem, but...

Post by elisape » Tue Mar 12, 2013 12:59 am

(this may sound stupid) I can't find where to edit the html on the template manager. I use Joomla's web version. thanks

wirkkalaj
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Sat Oct 20, 2012 7:25 pm

Re: How to make header clickable

Post by wirkkalaj » Mon Feb 17, 2014 5:20 am

bogdan69 wrote:The best way to have a clickable header is with CSS. Just set the a tag to display as block, set a height and width (the same as your image) and you have the simplest and best way to make a clickable header or logo with Joomla or any other script for that matter.
Could you please explain how to do this in more detail? What do you mean by set the tag to display as block (what tag)? Would I insert the code in the index.php file or somewhere else? Please explain. I would much rather do it with CSS than with java.

Simon Bol Majok
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Mon Sep 29, 2014 1:43 pm

Re: How to make header clickable

Post by Simon Bol Majok » Wed Oct 01, 2014 5:31 pm

Hi
here is another way of making header click able in joomla

It's simple, you will see.

Open index.php and find

<div class="art-headerobject"></div>

Now we insert a link around the div above in this way

<a href="http://www.google.it" target="_blank"><div class="art-headerobject"></div></a>

This and more than this you will find on
Last edited by alikon on Sat Oct 11, 2014 6:14 am, edited 1 time in total.
Reason: url removed


Locked

Return to “Templates for Joomla! 1.5”