Don't Hurt Your Head!

Posts Tagged ‘artisteer’

I have just recently purchased Artisteer 2 for designing Joomla templates and so far I have been very impressed. However, one shortcoming I have found is that Artisteer does not allow for a Joomla module position in the header of the template.  I think this will eventually become a standard functionality in the product, but in the meantime I have found a fairly simple workaround that involves editing a few of the template files.

Let’s say for example that we have the following design for a template in Artisteer and want to add a Joomla module position as indicated in red:

This can be done through the following steps:

1. Export template from Artisteer
2. Add module position to template details XML file
3. Add “div” and module position to the main template file
4. Add “div” positioning and formatting to CSS definition
5. Zip template folder and contents
6. Install template in Joomla
7. Select new module position for the Joomla module that you want to put in the header

Details:

Step 1:

Export the Artisteer template for Joomla, selecting the option “Export as folder”.

Step 2:

Open the templateDetails.xml file in any text editor. Add the line

<position>header</position>

beneath the other position definitions

Step 3:

Open the file index.php in any text editor. Add the line

<div><jdoc:include type=”modules”  name=”header” style=”artstyle” artstyle=”art-block” /></div>

directly under the line

<div class=”art-Header”>

Note: Choose the module class suffix that you want to be the default for this module position and enter it as the value for “artstyle”. In this example I chose to have it default to the art-block style.

Step 4:

Open the file /css/template.css in any text editor.  Add the following block of text to the document:

/* begin custom header content */
div.art-Header-content
{
margin: 0 auto;
position: absolute;
z-index:1;
top: 20px;  /* enter the number of pixels down from the top of the header to position the upper left corner of your module area */

left: 425px; /* enter the number of pixels in from the left of the header to position the upper left corner of your module area */

width: 400px; /* enter the width of your module area */

height: 180px; /* enter the height of your module area */

}

/* end custom header content */

Step 5:

Zip up template folder and all contents

Step 6:

Install template in Joomla

Step 7:

Change module position to “header” for your selected module

Here is the final result for my example:

I have just recently purchased Artisteer 2 for designing Joomla templates and so far I have been very impressed. However, one shortcoming I have found is that Artisteer does not allow for a Joomla module position in the header of the template.  I think this will eventually become a standard functionality in the product, but in the meantime I have found a fairly simple workaround that involves editing a few of the template files.Let’s say for example that we have the following design for a template in Artisteer and want to add a Joomla module position as indicated in red: