How To View Protostar Template Layout

New users of Joomla tend to find template module positions disruptive and maybe frustrating. Joomla 3 has improved the way templates work to ensure this is less disruptive, even so, some users might still notice it hard to add template positions to their templates. This commodity on CollectiveRay.com will attempt to clear the air virtually template module positions.

Contents [Testify]

- How to Display Modules in Joomla?
- What are Joomla Module Positions?
- How to assign a Module to a Position?
- Using the JDOC tag
- Logical Position Names
- How do I know what Positions my Template supports?
- Adding Joomla Module Positions

Showtime, most people struggle to sympathise what template positions are available for use on their Joomla template. This is very like shooting fish in a barrel to discover using the following steps:

How to Display Modules in Joomla?

When yous are creating a website using a new Joomla template that you haven't used earlier, you need to know the Joomla template positions that are supported and you can use. Y'all tin can do this either by checking out the Module Manager in the ambassador, i.e. viewing the positions which have modules assigned to them, or else use this tip. To see what the modules positions bachelor using the Module director, y'all need to go to Extensions > Modules and click on an existing module.

In the position parameter, y'all will encounter a whole list of Positions that you can assign the module to. The ones available in the template will exist listed in Positions dropdown:

show joomla template positions available

Nonetheless, even if you run into the list of positions, you yet don't know where and how they are used in the template, so we need to see where they are positioned.

To understand how to evidence module positions in Joomla follow these steps:

Go to the Template Manager (Extensions > Templates > Templates)
Click on the Options button at the top right
Enable the Preview Module Positions
Go to the frontend and add ?tp=1 to the end of your Joomla URL eastward.g. www.collectiveray.com?tp=ane
All the existing template positions volition now exist shown with their proper name e.thou. position-1, position-7, banner, as tin be seen below:

What are Joomla Module Positions?

Joomla positions are placeholders that you set modules to, such that a module is shown in that position. For case, if the Joomla template has a search position, yous would place the search module in that position.

The same goes for other module positions such as banner, sidebar, footer, breadcrumbs, left, right etc.

Note that you can usually add together more than one module to the same position i.e. y'all can add more than one module to your left and correct positions, with the society in which they are displayed beingness adamant by the Lodge parameter in the Module setup.

The positions in Joomla iii are defined per template. The template positions issues are the responsibleness of the template developer. They need to ensure that template positions defined in the template details file, actually exist in the template.

If you demand additional template positions, you would need to change your template to cater for the additional positions you demand. This requires cognition of PHP, HTML, and XML in order non to break your template.

This is particularly important for you to know and empathize, especially if you're planning to utilize a number of Joomla extensions such equally the ones which we listed here.

How to assign a Module to a Position?

When you are designing your website with Joomla, you'll want assign a number of dissimilar modules to different positions. This can be washed through the Positions parameter of the module. Now that you know the positions available, you just modify the Positions parameter to the name of the position where you lot desire the module to show.

show joomla template positions available If you assign more than than i module to the same position, for example in the sidebar position, the modules will be shown in the lodge that they are fix using the Ordering dropdown.

multiple modules in one position

To change the order, you need to select a different position in the Ordering parameter of each module:

module ordering

Using the JDOC tag

And so what determines where modules are rendered?

The JDOC tag in the index.php file is replaced by the modules assigned to that position (via Extensions > Module Manager and assigning a module to a particular position) when the page is being rendered. So if nosotros have

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

in the index.php file, and the Chief Card module is assigned to the left position, the Main Menu volition be displayed instead of this tag in the left position.

This applies to each jdoc tag defined in the index.php file. If I accept a

<jdoc:include type="modules" name="right" fashion="xhtml"/>

this will be replaced by the modules which are assigned to the correct position.

Logical Position Names

The proper name aspect in the jdoc tag, is a logical proper name. And then if the position name is "right", you would expect the module position to be to the right of the content, "superlative" to exist at the top of the content, "sidebar" to exist to the side and "footer" to the at the footer part of the website.

It is entirely possible to define the bottom position in the top part of the module, though typically template designers define tag names which make sense, i.e. the left position would eventually be displayed in the left expanse of the page, and the banner position would be displayed just in a higher place the content and then on.

How practise I know what Positions my Template supports?

Most reputable template designers explain which module positions are available in the template.

In Joomla 3, the responsibility remains with the designer to define the correct positions in the template details file. However, for free templates, one might not know which positions actually be.

So how do you go nearly discovering which positions are supported by the template?

The easiest way to do this is to follow our instructions above in How to Display Modules in Joomla

You can as well view directly which are the positions in the template files directly!

Merely open the template's alphabetize.php file, and search for the jdoc tag. Annotation the name of the places when the jdoc tag appears. I.eastward. if you find the following tags in the index.php file:

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

...

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

...

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

....

<jdoc:include type="modules" name="right" manner="xhtml" />

You lot tin can safely presume that the positions supported by your template are:

top
left
imprint
right

Adding Joomla Module Positions

In this section nosotros volition show briefly how to create an new module position in any template.

Y'all beginning need to decide where yous are going to place the position in your template (in terms of the template'due south HTML).

Y'all need to empathise exactly how the tempalate works. For instance we will be adding an leading-sidebar position to our template. We find the position (in the index.php) file where nosotros desire to add the leading sidebar and insert php / html code similar to the following:


<div id="leading-sidebar">

   <div class="adlinks-class">
    <jdoc:include type="modules" name="leading-sidebar" fashion="xhtml" />
   </div>

</div>


We then need to create the Module Position in the Template Details file by creating a new leading-sidebar position. Observe the TemplateDetails.xml file enclosed with y'all template under /templates/<templatename>/templateDetails.xml

Find the <positions> tag in your XML file. It looks something like this:

<positions>
    <position>left</position>
    <position>right</position>
    <position>top</position>
    <position>banner</position>
    <position>header</position>
    <position>footer</position>
    <position>pathway</position>
    <position>user1</position>
    <position>user2</position>
    <position>user3</position>
    <position>user4</position>
    <position>user5</position>
    <position>inset</position>
    <position>debug</position>
    <position>search</position>
    <position>debug</position>
</positions>

To add your ain position, y'all need to insert a new <position> tag before the endmost positions tag, in our example we volition add the leading-sidebar position correct subsequently the debug position. The stop consequence will exist as follows:

Once this is washed, we can at present assign a module to the leading-sidebar position in the Extensions > Modules page.

new position in modules

If you lot really desire to await professional person, terminate searching for free templates. Nearly of them look poor, are very express in positions and flexibility, have bugs, and typically contain hidden links to the original designers.

If you lot want your site to look nifty, become to the pros and get yourself a template from in that location. You lot won't exist sorry, and the end event will definitely show. The commencement impression of a website is obviously from the template, and you lot really want to get the offset impression right!

David Attard

David has been working in or around the online / digital industry for the final 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses become a competitive advantage using a combination of their website and digital platforms available today.