How to make header clickable
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
- lividsnails
- Joomla! Enthusiast
- Posts: 124
- Joined: Mon Jan 07, 2008 4:46 pm
How to make header clickable
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?
- lividsnails
- Joomla! Enthusiast
- Posts: 124
- Joined: Mon Jan 07, 2008 4:46 pm
Re: How to make header clickable
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?
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?
- lividsnails
- Joomla! Enthusiast
- Posts: 124
- Joined: Mon Jan 07, 2008 4:46 pm
Re: How to make header clickable
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>
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>
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Feb 11, 2008 8:43 pm
Re: How to make header clickable
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.
- nesrulz
- Joomla! Intern
- Posts: 53
- Joined: Fri Jul 18, 2008 1:13 pm
- Location: Zemun
- Contact:
- raulbcordoba
- Joomla! Explorer
- Posts: 299
- Joined: Mon Aug 28, 2006 5:32 pm
Re: How to make header clickable
Wouldn't be better to just add an anchor <a> to your header image than rather use javascript?
- nesrulz
- Joomla! Intern
- Posts: 53
- Joined: Fri Jul 18, 2008 1:13 pm
- Location: Zemun
- Contact:
Re: How to make header clickable
btw, how i can remove this popup menu from IE on my header?
This happen after adding this code...
Opera and FF work fine (of course), without popup menu...
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>
Opera and FF work fine (of course), without popup menu...
Serbian Racing Team @ www.SERT-LFS.net
- raulbcordoba
- Joomla! Explorer
- Posts: 299
- Joined: Mon Aug 28, 2006 5:32 pm
Re: How to make header clickable
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.
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.
- nesrulz
- Joomla! Intern
- Posts: 53
- Joined: Fri Jul 18, 2008 1:13 pm
- Location: Zemun
- Contact:
-
- Joomla! Fledgling
- Posts: 1
- Joined: Fri Jan 30, 2009 4:37 pm
Re: How to make header clickable
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!
-
- Joomla! Fledgling
- Posts: 1
- Joined: Fri Jan 30, 2009 5:39 pm
Re: How to make header clickable
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
Any thoughts?
-Stew
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Apr 09, 2009 1:43 pm
Re: How to make header clickable
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
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
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sun Jun 28, 2009 7:45 am
Re: How to make header clickable (and with URL per image)
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.
2. Update the header image div with following code:
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
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
?>
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; ?>'">
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.
Reason: Manual signature has been removed. Please use the forum signature instead.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Nov 01, 2010 3:40 pm
Re: How to make header clickable
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?
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?
- MeanCatCoffee
- Joomla! Apprentice
- Posts: 13
- Joined: Sat Oct 23, 2010 8:23 pm
Re: How to make header clickable
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>
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Mar 29, 2011 5:26 pm
Re: How to make header clickable
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
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
- GandalfGrey
- Joomla! Guru
- Posts: 723
- Joined: Tue Mar 25, 2008 8:18 pm
- Location: Sweden / Haninge
Re: How to make header clickable
You can use the img attribute usemap for that. For more information see hereDux12 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
“We can't solve problems by using the same kind of thinking we used when we created them."
-
- Joomla! Apprentice
- Posts: 8
- Joined: Fri May 21, 2010 4:25 pm
Re: How to make header clickable
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.
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.
-
- Joomla! Fledgling
- Posts: 3
- Joined: Mon Aug 15, 2011 6:44 am
Re: How to make header clickable
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
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.
- GandalfGrey
- Joomla! Guru
- Posts: 723
- Joined: Tue Mar 25, 2008 8:18 pm
- Location: Sweden / Haninge
Re: How to make header clickable
One way to do it is to change thisto thisand add this to the file templates/siteground-j15-63/css/template.css
and to be safe you should add position: relative; to the #header rule in the same file
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>
Code: Select all
<div id="header">
<a href="http://www.bumisehatbali.org/"></a>
</div>
Code: Select all
#header > a{
display: block;
height: 251px;
position: absolute;
width: 940px;
}
“We can't solve problems by using the same kind of thinking we used when we created them."
-
- Joomla! Intern
- Posts: 96
- Joined: Sun Aug 07, 2011 11:24 am
- Location: Romania
- Contact:
Re: How to make header clickable
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
-
- Joomla! Apprentice
- Posts: 21
- Joined: Thu Mar 08, 2012 2:40 pm
- Location: England
- Contact:
Re: How to make header clickable
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.
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sat Mar 09, 2013 11:43 am
I have the same problem, but...
(this may sound stupid) I can't find where to edit the html on the template manager. I use Joomla's web version. thanks
-
- Joomla! Intern
- Posts: 64
- Joined: Sat Oct 20, 2012 7:25 pm
Re: How to make header clickable
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.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.
-
- Joomla! Apprentice
- Posts: 17
- Joined: Mon Sep 29, 2014 1:43 pm
Re: How to make header clickable
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
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
Reason: url removed