Banner

How to Create New Joomla Module Positions

  • Created
    Tuesday, 20 September 2011
  • Created by
    GuidedHelp.net
  • Last modified
    Thursday, 22 September 2011
  • Revised by
    GuidedHelp.net
  • Favourites
    Add to favourites
  • Categories

joomla-how-to-create-module-positionsLearn how to create new module positions for your Joomla based website.

 


pagebreakline

Creating new module positions is easy with this quick how to guide.

pagebreakline

The available module positions of Joomla! is controlled by the template you are using. However it is possible to add new positions to a template. Some basic knowledge of HTML & CSS is required.

To add a new module position you first need to determine where the module position should be located. You can see the names and positions of all modules by adding "?tp=1" to the end of your Joomla! based website URL (for example - http://www.mywebsite.com/index.php?tp=1) this will temporarily display all available module positions on your website.

To add an additional module position, you first need to edit the templateDetails.xml file which is located in the root of your template directory. You will need to access this file via FTP (FileZilla is a good, free FTP application for Windows).

Via FTP, browse to the 'Templates' directory, where you will see a list of any installed templates. Locate the template that you are using for your website and within that directory you will see the templateDetails.xml file. Open this file to edit it (you can either right click and choose to open directly on the server, or copy it first by dragging it to the local computer which is typically on the left panel of the FTP window).

Look for the positions tag and add in a new position

<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
<position>mynewmoduleposition</position>
</positions>

Save the file and upload back to your ftp server. This has now enabled you to put modules into a specific module position within Joomla!, however you next need to help your browser display this module position.

To do this you will need to next open your templates index.php file which is also located in the root of your template directory. You should see a lot of code for existing module positions. You simply just need to add a new position into this code, into the specific area of your choice. So for instance, if you wanted the module to appear right below the breadcrumb position you would look for the following code:

<div id="pathway">
<jdoc:include type="modules" name="breadcrumb" />
</div>

and to add in your new position you would add the following code just below the code seen above, i.e.:

<div id="pathway">
<jdoc:include type="modules" name="breadcrumb" />
</div>
<div id="mynewmoduleposition">
<jdoc:include type="modules" name="mynewmoduleposition" />
</div>

Once you have saved and uploaded the index.php file back to your server via ftp, your new module position will be seen within your browser. However the position does not yet have any styling, so most likely will look very odd.

Therefore you lastly have to edit the CSS of your template to style it to your needs. The CSS file that you need to edit is typically also contained within your templates directory, quite likely to be contained within a sub directory called CSS. Quite often the CSS file is called template_default.css

You do need knowledge of CSS to style it appropriately, but an example to use would be the following:

div#mynewmoduleposition {
width: 400px
border: 1px solid #000;
padding: 10px;
}

Tip!

Modules Anywhere is a free extension for Joomla! from NoNumber.nl that allows you to place modules anywhere on your website pages wherever you can add text, including inside components or even inside other modules. Modules Anywhere is a great way of extending your website without having to manually build in new module positions into your website templates.