The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 24 posts ] 
Author Message
PostPosted: Thu Feb 14, 2008 9:00 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Jan 07, 2008 4:46 pm
Posts: 124
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?


Top
 Profile  
 
PostPosted: Fri Feb 15, 2008 5:36 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Jan 07, 2008 4:46 pm
Posts: 124
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?


Top
 Profile  
 
PostPosted: Fri Feb 15, 2008 6:36 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Jan 07, 2008 4:46 pm
Posts: 124
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>


Top
 Profile  
 
PostPosted: Tue Jul 15, 2008 8:15 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Feb 11, 2008 8:43 pm
Posts: 1
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. :)


Top
 Profile  
 
PostPosted: Fri Jul 18, 2008 1:21 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Fri Jul 18, 2008 1:13 pm
Posts: 53
Location: Zemun
Thx lividsnails!

Serbian Racing Team @ www.SERT-LFS.net


Top
 Profile  
 
PostPosted: Fri Jul 18, 2008 3:18 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Aug 28, 2006 5:32 pm
Posts: 299
Wouldn't be better to just add an anchor <a> to your header image than rather use javascript?

:)


Top
 Profile  
 
PostPosted: Fri Jul 18, 2008 5:13 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Fri Jul 18, 2008 1:13 pm
Posts: 53
Location: Zemun
btw, how i can remove this popup menu from IE on my header?
This happen after adding this code...

Code:
<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


Top
 Profile  
 
PostPosted: Fri Jul 18, 2008 5:26 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Aug 28, 2006 5:32 pm
Posts: 299
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)


Top
 Profile  
 
PostPosted: Fri Jul 18, 2008 7:06 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Fri Jul 18, 2008 1:13 pm
Posts: 53
Location: Zemun
OK. :)

_________________
Serbian Racing Team @ www.SERT-LFS.net


Top
 Profile  
 
PostPosted: Fri Jan 30, 2009 4:47 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Jan 30, 2009 4:37 pm
Posts: 1
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!


Top
 Profile  
 
PostPosted: Fri Jan 30, 2009 5:59 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Jan 30, 2009 5:39 pm
Posts: 1
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


Top
 Profile  
 
PostPosted: Wed Apr 29, 2009 5:08 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Apr 09, 2009 1:43 pm
Posts: 10
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


Top
 Profile  
 
PostPosted: Sun Jun 28, 2009 8:25 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Jun 28, 2009 7:45 am
Posts: 1
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:
<?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:
        <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.
Manual signature has been removed. Please use the forum signature instead.


Top
 Profile  
 
PostPosted: Fri Nov 05, 2010 10:17 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Nov 01, 2010 3:40 pm
Posts: 6
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?


Top
 Profile  
 
PostPosted: Sun Dec 12, 2010 3:50 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 23, 2010 8:23 pm
Posts: 13
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:
<!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>

_________________
www.meancatcoffee.com


Top
 Profile  
 
PostPosted: Tue Mar 29, 2011 5:29 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Mar 29, 2011 5:26 pm
Posts: 1
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 :-[


Top
 Profile  
 
PostPosted: Tue Mar 29, 2011 8:49 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Tue Mar 25, 2008 8:18 pm
Posts: 723
Location: Sweden / Haninge
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."


Top
 Profile  
 
PostPosted: Tue Aug 16, 2011 3:31 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri May 21, 2010 4:25 pm
Posts: 8
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.


Top
 Profile  
 
PostPosted: Sun Sep 11, 2011 1:32 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Aug 15, 2011 6:44 am
Posts: 3
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.


Top
 Profile  
 
PostPosted: Sun Sep 11, 2011 7:11 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Tue Mar 25, 2008 8:18 pm
Posts: 723
Location: Sweden / Haninge
One way to do it is to change this
Code:
<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:
<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:
#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."


Top
 Profile  
 
PostPosted: Thu Sep 15, 2011 12:13 pm 
Joomla! Intern
Joomla! Intern

Joined: Sun Aug 07, 2011 11:24 am
Posts: 95
Location: Romania
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.

_________________
New gadgets and gadget reviews http://www.newgadgetz.com
Tech news and latest updates from the tech world http://www.techiesaves.com


Top
 Profile  
 
PostPosted: Tue Mar 13, 2012 4:45 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Mar 08, 2012 2:40 pm
Posts: 21
Location: England
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.

_________________
http://www.spiralyne.co.uk


Top
 Profile  
 
PostPosted: Tue Mar 12, 2013 12:59 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Mar 09, 2013 11:43 am
Posts: 1
(this may sound stupid) I can't find where to edit the html on the template manager. I use Joomla's web version. thanks


Top
 Profile  
 
PostPosted: Mon Feb 17, 2014 5:20 am 
Joomla! Intern
Joomla! Intern

Joined: Sat Oct 20, 2012 7:25 pm
Posts: 62
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 24 posts ] 



Who is online

Users browsing this forum: No registered users and 17 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group