Source: Artisteer


Well, I have been searching for a while for a way to add module positions to the header. I’m a novice (but a keen one) and today I surprised myself with how easy it was to remove the artisteer generated “header” and replace it with 3 module positions “headerleft” “headercenter” and “headerright” so I can now customise my header as much as I want. Wanna know how it looks, try [url][/url] ? Want to know how I did it… read on…


1. Open your index.php file and comment out the artisteer header lines, i.e. find

<div class=”art-Header”>


<div class=”art-Header-jpeg”></div>




and replace it with:

<!– <div class=”art-Header”>


<div class=”art-Header-jpeg”></div>


</div> –>



2. Immediately below this add the following code:

<!– BEGIN: headermain –>

<div id=”headermain”>

<!– BEGIN: headerleft –>


<div class=”headerleft” >


<jdoc:include type=”modules” name=”headerleft” style=”xhtml” />



<!– END: headerleft –>

<!– BEGIN: headercenter –>


<div class=”headercenter” >


<jdoc:include type=”modules” name=”headercenter” style=”xhtml” />



<!– END: headercenter –>

<!– BEGIN: headerright –>


<div class=”headerright”>

<jdoc:include type=”modules” name=”headerright” style=”xhtml” />



<!– END: headerright –>


<!– END: headermain –>



3. In your templateDetails.xml file add the following “positions” to the end of your positions list (after the “user3” position)






4. In your template.css file add the following code to the end (you might wish to customise your code with the appropriate sizes and colours and anything else you fancy). Make sure the width of the “headermain” is the width of your template (unless you want to overlap), ensure the height of each of the divs below is the same (unless you don’t want to)… change the colours (the colours I have used are for illustrative purposes only… unless you’re feeling weird).

#headermain {width: 1000px; height:150px; z-index: 0; margin: 5px auto 0 auto}

div.headerleft {width: 300px; background-color: #000000; color: #ffffff; height: 150px; float: left; z-index: -1; overflow: hidden}

div.headercenter {width: 300px; background-color: #00ff00; color: #ffffff; height: 150px; float: left; z-index: -1; overflow: hidden}

div.headerright {width: 400px; background-color: #0000ff; color: #ffffff; height: 150px; float: right; z-index: -1; overflow: hidden}



5. Save all of the files to your server


6. Go into your Joomla backend and assign modules to the above positions. I haven’t tried it but if you added the “custom html” module to one of the above positions, you could probably use your animated gif of even drop in a flash module.


This worked for my template, I cannot confess to being a Joomla expert so if it doesn’t work for you… erm… whoops! I’m probably not the guy to be able to help you. I spent 20 mins writing this up so I hope it helps someone at least otherwise it just looks like I’m doing a nana-nana-boo-boo at you all.


If my code above is wrong and somebody more experienced than I spots it, unless it is going to break my website, please don’t tell me… I have fragile confidence… however, if it does suck and will break, my email is rikki a t web presence designlab dot com

Module positions:
joomla artisteer module positions