How-to: Add link to Flash header in Joomla! template |
|
2ninerniner2
|
Object:
- to create a link to the home page for a Flash header in an Artisteer 2.4 Joomla! template
What you’ll need:
Artisteer 2.4 – full, activated version or a Joomla! template created with it that has a Flash animation incorporated into the header area
Graphics editing software – something to create a transparent PNG graphic; I used Fireworks
Text editor – Notepad, Notepad ++, Dreamweaver but NOT MS-Word!
What you’ll be adding:
a newly created transparent PNG file named trans_header.png
a newly created class named “header_link” and using it in the template.css and index.php of the template
With the release of version 2.4 of Artisteer, one is now able to incorporate a Flash animation into the header of the template. Sometimes it is desired to be able to click anywhere in the header in order to return to the home page. As one does not have access to the Flash FLA source file in Artisteer, one cannot add this functionality natively and there is no provision within Artisteer to do so. A workaround is required. There are probably other methods, but I have tested this one and it works in all current versions of all the major browsers and the latest Joomla! (1.5.15 and 1.5.16).
1) Determine the size of the existing header graphic area
This can be done by opening the template.css file for the template in the text editor and looking for this code:
div.art-header
{
margin: 0 auto;
position: relative;
z-index: 0;
width: 974px;
height: 225px;
overflow: hidden;
}
2) Create the transparent graphic
You’ll see that it is 974 pixels wide by 225 pixels high. Open your graphics editing program and create a transparent rectangle of these dimensions and save it as a PNG. Note that this rectangle will have no fill and no border; basically an empty, transparent graphic. Depending upon the software, you may be required to select the transparency type on the save function; choose Alpha Transparency. Save or copy this file to the images folder of the template.
3) Create the CSS entry
Back in the template.css file, select all of the code that is shown in 1) above and copy it. Scroll to the bottom of the file and paste it there (or right below the existing one; I just find it easier to get to later on). Once that is done, edit the entry so it is now like below and then save the file:
div.header_link
{
position: absolute;
z-index:1;
top: 0px;
left: 0;
width: 974px;
height: 225px;
overflow: hidden;
}
4) Open the template’s index.php and look for this code:
<div class="art-header">
<div class="art-header-jpeg"></div>
Edit this code so that it reads like below and save the file:
<div class="art-header">
<div class="header_link"><a href="<?php echo $baseUrl; ?>/"><img src="<?php echo $templateUrl; ?>/images/trans_header.png"></a></div>
<div class="art-header-jpeg"></div>
This entry …
<?php echo $baseUrl; ?>/"><img src="<?php echo $templateUrl; ?>
… provides for a “portable” way to point to where your template’s images folder is located.
You will now have an ”invisible” (read: transparent) graphic linked to your home page “floating over” your Flash header :)
Cheers!
Lyle
|
| |
|
|