Joomla Positions

When building a new website with Joomla, distributing different modules on each page will be some of the most common tasks you'll encounter. In order to do this effectively you'll need to be aware of the Joomla positions for your template. These positions are set by the template designer via a combination of three files and file types. These are templatedetails.xml, index.php, and usually template.css. We'll take a look at these here:

TemplateDetails.xml

This file is located in your templates folder and advises Joomla where to place a new module in the template. As an example, if you're creating a new banner module and would like the module to display in the banner position you would choose banner in the module parameters.

This banner module will display in the space created by your template designer. (Note: the specific space will vary depending on the template you choose or have created.) If you'd like to change where and how the banner module displays you'll need to find and edit the other two files, index.php and template.css. Most designers use the template.css file to control the positioning of the default Joomla positions.

There will be cases where you'd like to add a Joomla position to your template. This can be easily accomplished by opening your templatedetails.xml file and adding the new position between the positions tags.

<positions>
<position>myNewPosition</position>
</positions>

Index.php

When changing or adding a Joomla position, you'll need to visit the index file. For example if your banner position resides below the content component, and you'd like for it to display above the content, you'd move the call for the banner position above the content area. Module calls use this syntax:

<jdoc:include type="modules" name="mynewposition" style="xhtml" />

Template.css

The last piece of the puzzle is adding the position to the style sheet. Here you'll want to be as specific as possible. For example if your module lives inside of a div, you may want to place an id on it instead of a class. When utilizing the technique mentioned earlier to change a module in the index, keep in mind that minor edits will most likely be needed here also.

How do I find my template's positions?

The easiest way to locate the Joomla positions for your template is simply to place ?tp=1 at the end of your url. For example if test.com was running Joomla! I'd place test.com/?tp=1 in the browser and press enter to view my template's positions. Finally if in the administrator, you can view your Joomla positions by navigating to Extensions | Template Manager | Choose your template, and simply press preview. A frame will open with your website's template where you can view the Joomla positions.

---

Share this page with your favorite Social Bookmarking websites

TrackBack URI for this entry

Comments (4)

Subscribe to this comment's feed

Convert header into a normal module position.
written by Abraham , June 21, 2009

Thanks so much for the information here.
My problem is that i want to convert the header position of two websites into normal module positions, so I can implement something more dynamic like the simple image rotator.
I am very new to web programming, but i am getting along with the joomla stuff. If you could help me to go about this, i'd be much grateful.
Thanks in advance.

• 
• +0
• 
• 

module positioning
written by samuel, June 22, 2009

hello,
thanks for da info given regarding module positioning.
basically i want to create a new position in the center of the page(content). the reason for it is to keep sermonspeaker, which consists of some audio sermons for the viewers to listen.i have installed sermonspeaker component and sermoncast module. but the problem is i am unable to position it in the center. can u help me out.

thanks
sam

• 
• +0
• 
• 

Developer
written by Brian Duckett, June 22, 2009

Hi Abraham,

The Firefox browser has an add-on called Firebug, which can be downloaded from http://addons.mozilla.org - Install this plugin into your browser, click inspect, and click on the module position you'd like to edit. You'll be able to see the id or class for the header. Open up the index.php for your template and use the syntax in this article, for adding the module position. Add the new position to your templateDetails.xml. The style sheet shouldn't need any major changes.

Note: You may want to copy your site to a development directory to test your changes.

If you'd like for me to take care of it for you, please visit the store. 1 hr. of general support will take care of all of expenses for this service. http://www.revision-technology...oomla.html

• 
• +0
• 
• 

Developer
written by Brian Duckett, June 22, 2009

Hi Sam,

The easiest way to get the module to display in the center of the page is to use the { loadposition myposition } without the left and right spaces in the main content area, where "myposition" is the actual module position name (e.g. user1) being used to hold that element.

I hope this helps.
~Brian

• 
• +0
• 
• 

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Add Comment Preview