Artisteer 3 / Joomla 1.6 Clickable Headers


Author Message
Les

Posted: 9/12/2011
Quote message 

Artisteer 3 - Joomla 1.6

To make a clickable header.....

For the header Artisteer genrates the following lines to display the header graphics

<div class="art-header">
<div class="art-header-clip">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
</div>
<div class="art-headerobject"></div>
<div class="art-logo"> </div>
</div>


where

div.art-header
{
margin: 0 auto;
position: relative;
width:100%;
height: 160px;
margin-top: 0;
margin-bottom: 0;
}

div.art-header-clip
{
position: absolute;
width:100%;
left:0;
overflow:hidden;
height:160px;
}

div.art-header-png
{
position: absolute;
left:0;
top: 0;
width: 986px;
height: 160px;
background-image: url('../images/header.png');
background-repeat: no-repeat;
background-position:center center;
}

div.art-header-jpeg
{
position: absolute;
top: 0;
left:0;
width: 986px;
height: 160px;
background-image: url('../images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}

Effectively Artisteer 3 creates 2 similar images so that the larger png image has its corners shaped, and the inner jpg fits on top of this.

To make the header clickable I changed

<div class="art-header-jpeg"></div>

to:

<div class="art-header-jpeg"><a href="http://www.mylink"><img src="/templates/mytemplate/images/header.jpg" title="myTitle"></a></div>

And yes it is clickable but the jpg and png images are no longer aligned

Whats the best way to resolve this? Dispense with class="art-header-jpeg" and create a new class for img? I tried that but that also failed. Any advice please.
 
jrgweb

Posted: 9/12/2011
Quote message 

Try this.
<div class="art-header">
<a href="http://www.mylink"><div class="art-header-jpeg"></div></a>

</div>
 
jrgweb

Posted: 9/13/2011
Quote message 

Les
my last post was for images and not the entire header. sorry.
and that said, it depends on what version of artisteer one is using.
 
jrgweb

Posted: 9/13/2011
Quote message 

Les,

I did find a way to do this with artisteer 3.1 beta.

http://j17.jrgweb.net

If you click on the left image it wil take you to google.com
If you click on the right txt, joomla 1.7, it will take you to yahoo.com and then if you click anywhere other than the two just mentioned, it will link to msn.com.

artisteer 3.1 beta and joomla 1.7
 
Timm

Posted: 9/13/2011
Quote message 

and how did you make this?
right click is disabled on this page, so it looks like advertisement of your site..
 
jrgweb

Posted: 9/13/2011
Quote message 

lol this is a demo site. I will turn right click plugin test off.


 
Les

Posted: 9/14/2011
Quote message 

Quote jrgweb:

Try this.
<div class="art-header">
<a href="http://www.mylink"><div class="art-header-jpeg"></div></a>

</div>


Brilliant! Just what I needed. Thanks!:-)
 
panosm763

Posted: 10/11/2011
Quote message 

In my theme i use a flash and there is no art-header-jpeg
(Artisteer 3.1 beta1)
 
VORTO

Posted: 12/14/2011
Quote message 

To make the image (as in the logo) in the header link to the home page, this worked for me:
---------------------------------------------------------------------------------
in the 'Edit Main Page Template'
change <div class="art-headerobject"></div>

to <a href="<?php echo $document->baseurl; ?>/">
<div class="art-headerobject"></div></a>
---------------------------------------------------------------------------------

Seems to generically work for all templates from 3.1
 
Veronika

Posted: 1/26/2012
Quote message 

Hi,
thanks for the idea how make the logo clickable - it really works.
However it seems that this way how to do it is not valid:

Document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<div class="art-headerobject"></div></a>

I have tried all ways I found to solve it but not succeed; it can be just small thing but I'm not able to find it out.

Can anyone help me? Thank you!
 
Garry

Posted: 1/26/2012
Quote message 

@ Veronika

Posting your website URL here may be helpful.
 
Alberto

Posted: 5/10/2012
Quote message 

To add a link in the header in joomla 2.5.4 I did as follows:

*Your joomla -> Template Manager -> Edit main page template

<div class="art-headerobject" onclick="location.href='http://www.kreamegas.se';" style="cursor: pointer;"></div>

best regards
@KreaMegas
 
Zian

Posted: 5/17/2012
Quote message 

Thank you Alberto, worked like a chram ;)

 
Ingela

Posted: 7/4/2012
Quote message 

I have Joomla 2.5.6.

I tried Alberto's advice and put the code directly after
<div class="art-header"</div>

Maybe that's wrong because header isn't clickable. Any advice?
 
Alex

Posted: 7/10/2012
Quote message 

Quote VORTO:

To make the image (as in the logo) in the header link to the home page, this worked for me:
---------------------------------------------------------------------------------
in the 'Edit Main Page Template'
change <div class="art-headerobject"></div>

to <a href="<?php echo $document->baseurl; ?>/">
<div class="art-headerobject"></div></a>
---------------------------------------------------------------------------------

Seems to generically work for all templates from 3.1


:-DWorks very well with artisteer 3.1 and Joomla 2.5....!! Just perfect, Thks
 
Alberto

Posted: 7/14/2012
Quote message 

Quote Ingela:

I have Joomla 2.5.6.

I tried Alberto's advice and put the code directly after
<div class="art-header"</div>

Maybe that's wrong because header isn't clickable. Any advice?


Hi Ingela

The code you entered is not within the <div class = "art-header" </ div> but the <div class="art-headerobject"> I tried it on joomla 2.5.6 and it works perfectly;).
 
Warren

Posted: 10/3/2012
Quote message 

Quote Ingela:

I have Joomla 2.5.6.

I tried Alberto's advice and put the code directly after
<div class="art-header"</div>

Maybe that's wrong because header isn't clickable. Any advice?


I have Joomla 2.5.7, Artisteer 3.1 and 4.0 and here is what I do to fix it.
Go to Control Panel->Template Manager->Templates->Your joomla Template details and files-> Edit main page template
I changed this line <div class="art-header">
to <div class="art-header" onclick="location.href='http://www.mywebsite.com';" style="cursor: pointer;">