Artisteer Tips

One of the very first things that I needed to do with a template for Joomla that was made with Artisteer was to add a couple of module positions that are not available by default. Although there are 22 already, there never seems to be enough or they are not where you need them to be. So let’s go ahead and fix that for 2 of the most requested module positions:

at the very top of the page, above the header or menu, depending upon how your template is configured
within the header area itself

You can preview what we are going to accomplish in this guide by viewing a Joomla 1.5.20 demo site, with the default Joomla Sample Data, that has these 2 new positions already incorporated into an Artisteer template. Select Tips and Guides > Artisteer > Artisteer Demo from the main menu on this site. In an attempt to keep things as simple as possible, I have used the template that Artisteer creates and displays when it initially starts, with the following modifications:

width set to 980px
3 column: left/content/right
removed the palm trees background texture :)
export options: removed both backward link to author and backward links to CMS and Artisteer

Artisteer 2.4.0.27666 Standard Edition for Windows was used to create this demo template. You can download the customized template ZIP file in the Joomla Template Downloads, file name: artx_default.zip.

OK, here we go. You will need to edit 3 files in your template.

templateDetails.xml
index.php
template.css

Use a plain text editor such as Notepad or Notepad ++ or an HTML editor such as Dreamweaver. DO NOT, I repeat, DO NOT use Microsoft WORD or OpenOffice Writer to do these edits!

1) templateDetails.xml

Toward the bottom of the page, you will find the spot where the module positions are defined and it should look like this:

<positions>
    <position>banner1</position>
    <position>banner2</position>
    <position>banner3</position>
    <position>banner4</position>
    <position>banner5</position>
    <position>banner6</position>
    <position>bottom1</position>
    <position>bottom2</position>
    <position>bottom3</position>
    <position>breadcrumb</position>
    <position>copyright</position>
    <position>left</position>
    <position>right</position>
    <position>syndicate</position>
    <position>top1</position>
    <position>top2</position>
    <position>top3</position>
    <position>user1</position>
    <position>user2</position>
    <position>user3</position>
    <position>user4</position>
    <position>user5</position>
</positions>

These are the standard module positions that are created in every Joomla template made with Artisteer. What you do next is select the complete last entry and make 2 copies of it directly under it so that it now looks like the following:

Note that I added the red coloring just to make it easier to see; do not do this on your own code :) Now what needs to be done is to rename these 2 copies to what we want these new positions to be called. You can choose whatever you wish, but for this example, I have chosen page_top and header_right as it explains exactly where I want them to be. So go ahead and make the changes so that it now looks like it does below:

Save your changes and close the file. That’s it, that’s all for the templateDetails.xml file.

Next up is where you are actually adding the module position within the template, that is, where you and your visitors can see it. The file we need to open now is the index.php file for the template. I am only using the section of the file where the changes are made so look through yours until you see something like this:

 <div id="art-main">
 <div class="art-sheet">
 <div class="art-sheet-tl"></div>
 <div class="art-sheet-tr"></div>
 <div class="art-sheet-bl"></div>
 <div class="art-sheet-br"></div>
 <div class="art-sheet-tc"></div>
 <div class="art-sheet-bc"></div>
 <div class="art-sheet-cl"></div>
 <div class="art-sheet-cr"></div>
 <div class="art-sheet-cc"></div>
 <div class="art-sheet-body">

 <div class="art-header">
 <div class="art-header-jpeg"></div>
 <div class="art-logo">
 <h1 id="name-text" class="art-logo-name"><a href="/">Headline</a></h1>
 <div id="slogan-text" class="art-logo-text">Slogan text</div>
 </div>
 
 </div>

It should be noted that depending upon how your template has been configured, it may differ slightly from the above. The two new module positions have bee added below on line 13 and line 15. The easiest way to do your is to just copy these 2 entries and place them EXACTLY where shown below:

<div id="art-main">
<div class="art-sheet">
 <div class="art-sheet-tl"></div>
 <div class="art-sheet-tr"></div>
 <div class="art-sheet-bl"></div>
 <div class="art-sheet-br"></div>
 <div class="art-sheet-tc"></div>
 <div class="art-sheet-bc"></div>
 <div class="art-sheet-cl"></div>
 <div class="art-sheet-cr"></div>
 <div class="art-sheet-cc"></div>
 <div class="art-sheet-body">
 <jdoc:include type="modules" name="page_top" style="art-block" />
<div class="art-header">
 <div class="art-header-jpeg"><div id="header_right"><jdoc:include type="modules" name="header_right" style="art-block" /></div></div>
<div class="art-logo">
 <h1 id="name-text" class="art-logo-name"><a href="/">Headline</a></h1>
 <div id="slogan-text" class="art-logo-text">Slogan text</div>
</div>

</div>

That was easy! But be careful … make absolutely certain that it is EXACTLY where it is shown and that you haven’t missed something or added anything extra. If these changes don’t work for you, chances are very good that this is where the trouble is; all it takes is for a single missed or extra character. Save your changes.

Open up the last file required, the template.css file which will be in the css folder within your template’s folder. It is a matter of personal preference, but generally, when I am adding new code to a css file, I like to add it to the very end of the file; makes it easier and faster to find if you need to adjust it. All you need to do is copy the entire block of code below and paste it into the template.css at the very end.

#header_right
{
   float: right;
   width: 380px;
   height: 142px;
   margin: -9px 10px 10px 10px;
}

The size and position values in the above code were from a template I made for a client who required a certain dimension and placement; you and freely adjust any and all of these to suit your own needs. Save your changes and then go try it out :)

One of the easiest ways to see these new positions in action is to do what I did for the demo site: create a new Custom HTML module, add some text and set it to one of these new positions that will now show up in the module position drop down list. That is one of the main reasons we had to add them to the tempateDetails.xml file as that is where the drop down list gets the values from. Make another and set it to the second new position. Play around with the dimensions, especially if you are adding a banner graphic or a slide show module or the like. You may have noticed that in the index.php, the new positions had their default styling set to art-block. You can change this in the module class suffix field by adding one of the default Artisteer suffixes, namely: