Joomla Template Header Question

[rusty155]

Hi,

I was wondering how I go about inserting links into the main template header. I know there is already one there on the left that links back to the homepage. I have the school name, phone number and e-mail address on there and I want to make the e-mail address a mailto: link. I have tried creating slices in both photoshop and fireworks but to no avail. I'm sure I'm missing something glaringly obvious!

On another related issue - Is it possible to add a module within the header itself? I have been playing with a text size addon from joomla extensions that works great but would like to be able to add a simple module within the header itself like on the main joomla site:

http://www.joomla.org/

Thanks!

[rusty155]

Bump

Anyone?!

[SYSMAN_MK]

Let me look into this. Will get back to you soon.

[rusty155]

Any news on this? - Sorry to drag it up but it's doing my head in!!

[SYSMAN_MK]

Which theme you using rusty?

[rusty155]

Hi - thanks for getting back, I am using eg_default

[SYSMAN_MK]

I'm looking into the first question. Means me creating an image map myself, so will take some time.

As for your second question there is already a module posotion available within the header "User4" You could try publishing your module there and then edit the css to change the stlye if needed.

[SYSMAN_MK]

Right I have had alook at the image maped header image. For this to work you will loose the image border function.

Use Photoshop to create your new sliced image map header image and use the save for web option and save both the images and html

Edit the index.php of the theme and remove the following:

<!-- Start Image Border Script-->
<script type="text/javascript">
//<![CDATA[
var png_overlay = '<?php echo $mosConfig_live_site;?>/templates/eg_default/js/wide_frame.png';
var suffix = '_over';
//]]>
</script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/eg_default/js/png.js"></script>
<!-- End Image Border Script-->

Open the newly created html from Photoshop in a text editor and copy the image slice code and paste it into the index.php under <div id="header">

Edit the themes.css.css file and remove line 43:

background-image: url('../images/header.png');

Upload the images from the sliced image to the images folder of the theme.

You should now have a image map header.

Hope that makes sense.

[rusty155]

Thanks a lot Sysman.

There is just one thing intriguing me - the home link within the header on the school logo. There is a blank.gif image there that links back to the homepage of the site. Whereabouts is this referred to in the code, and is it possible to move it and or create a similar one the other side of the header for a mailto link without having to lose the image border functionality?

Sorry to be a real pain!

[SYSMAN_MK]

Right had another look and this can be done in the following way.

Add the following to the index.php file under the <div id="headerl"> entry:

<div id="headerr"><a href="%your link goes here%"><img src="<?php echo $mosConfig_live_site;?>/templates/eg_default/images/blank.gif" width="%width of link area%" height="%height of link area%" alt="<?php echo $mosConfig_sitename;?>" border="" /></a></div>

Change the link, width and height details to create the link area required.

Add the following to the template_css.css:

#headerr{
	position: relative;
	top: 30px;
	left: 26px;
	float: right;
	text-align: right; /* ie */
}

Edit the top and left values to move the location of the link area.

You should now have second link. I tried this on my demo server and worked a treat. Hope it help you out.