Posts Tagged ‘artisteer’
How to add a Joomla module position to the header of a Artisteer 2 template
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:
- Artisteer template
This can be done through the following steps:
- Export template from Artisteer
- Add module position to template details XML file
- Add “div” and module position to the main template file
- Add “div” positioning and formatting to CSS definition
- Zip template folder and contents
- Install template in Joomla
- 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: