Compago knowledge

  • Increase font size
  • Default font size
  • Decrease font size
Home Manuali Utilità How to add a new module position in Joomla

How to add a new module position in Joomla

E-mail Stampa PDF

One of the characteristics of Joomla is the possibility of modifying the structure of a template very easily.

A template can be simple or complex, but all must have an index.php file and a templateDetails.xml file. In order to add a new module position in the template will need to modify these two files.

Then first you must locate and open the file index.php , that you will find the file inside the root of your template folder.

Second you must select exactly where you want to add the new module position. To do this you need to understand how the html/php code it works, so you can add a new tag without affecting the existing code.
By using Firefox and Firebug or Google Chrome with Developer tools you can see the structure of your template in the frontend so that it is easier to find the exact location where you will add the new position.

Third, when you know where to put the new position then you can insert this code inside index.php :

<?php if($this->countModules( 'newposition' )) { ?>
  <div><jdoc:include type="modules" name="newposition" style="none" /></div>			
<?php } ?>


<?php if ($this->countModules('newposition')): ?>
<div><jdoc:include type="modules" name="newposition" style="none" /></div>
<?php endif; ?>

The code above will display the new position only if there is actually a module inside it, otherwise the position will not be displayed.

Fourth, you need to open the file templateDetails.xml, you will find the file inside the root of your template folder, near the index.php.
In the file locate the section about the module positions and insert the new position:


Now the new module position is created. You can style individually the new position with the class newposition.

In the previous example we use a div container for all the modules that you will put in that position, but you might want to use a different tag depending on the existing template that you are editing.
Might be a good idea to add an id attribute to that container to create CSS styles for the new location.

<?php if ($this->countModules('newposition')): ?>
<div id="newposition"><jdoc:include type="modules" name="newposition" style="none" /></div>
<?php endif; ?>

Module output

The module output in Joomla is managed by the Module Chrome and the file templates/system/html/modules.php. When you insert a module position inside your template index.php file, you usually define a style for it.

For example you can set the style as "xhtml":

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

This means that Joomla will look into the file templates/system/html/modules.php to find the Module Chrome modChrome_xhtml. This Module Chrome defines the module output structure.

However you can override this Module Chrome if there with a file  templates/your_template/html/module.php. In this file you can redefine a Module Chrome modChrome_xhtml so that you can override the default one in templates/system/html/modules.php, and joomla will follow your instruction and not the existing one.

You can also create a new custom Module Chrome. For example let's create a new Module Chrome with the name mystyle. In this case the module include inside the file index.php of your template should be:

<jdoc:include type="modules" name="newposition" style="mystyle" />

The module style in the above example is mystyle. Now we must define a Module Chrome modChrome_mystyle inside the file modules.php.

Create or open the file templates/your_template/html/module.php and insert this new function:

// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_mystyle($module, &$params, &$attribs) {
	if (!empty ($module->content)) : ?>
		<?php if ($module->showtitle != 0) : ?>
			<h2><?php echo $module->title; ?></h2>
		<?php endif; ?>
		<?php echo $module->content; ?>
	<?php endif;

With the style named "mystyle" we must use a function named "modChrome_mystyle".

This example is really simple and doesn't add any special features, but you can customize the above code, for example you can change or add html elements and customize the look of the modules in that position, like tabbed or sliding modules.

Ultimo aggiornamento ( Domenica 05 Febbraio 2012 07:48 )