Pada template joomla, kita bisa menambah posisi baru module dengan cara menambahkan kode di file index.php, templateDetails.xml dan file css, biasanya template_css.css.

1. Menambahkan code di file index.php

File index.php berada pada folder template yang di gunakan. Misalnya template yang di gunakan bernama zanexio, maka file index.php berada pada folder templates/zanexio/index.php. Jika kita menginstall joomla di drive C komputer dan menggunakan software XAMP, maka secara detailnya file index.php template yang akan di tambakan kode baru adalah C:\\XAMAP\htdocs\joomla\zanexio\index.php. misalnya kita akan menambahkan posisi baru module di sidebar sebelah kanan. Sebelumnya template yang kita gunakan hanya 2 kolom saja, sedangkan kita menginginkan 3 kolom, maka penambahannya sebagai berikut.

Sebelum penambahan kode di file index.php

....................................................(Kode sebelumnya tidak di tampilkan)

<div id="containerwrap">

         <div id="left">

                   <div class="padding">

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

                 </div>

        </div>

        <div id="content">

                 <div class="padding">

                             <jdoc:include type="component" />

                 </div>

        </div>

</div>

...........................................(kode setelahnya tidak di tampilkan)

Setelah penambahan kode di file index.php

....................................................(Kode sebelumnya tidak di tampilkan)

<div id="containerwrap">

         <div id="left">

                   <div class="padding">

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

                 </div>

        </div>

        <div id="content">

                 <div class="padding">

                             <jdoc:include type="component" />

                 </div>

        </div>

        <div id="right">

                 <div class="padding">

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

                 </div>

        </div>

</div>

...........................................(kode setelahnya tidak di tampilkan)

Tulisan yang berwarna biru adalah kode baru yang di tambahkan di file index.php

2. Menambah kode di file templateDetails.xml

Agar posisi baru module pada template dapat di pilih di area back-end (administrator), khususnya dalam penempatan posisi module di jendela module manager, harus di tambahkan kode baru dalam file templateDetails.xml. Contohnya sebagai berikut.

Sebelum penambahan kode

...........................................(kode sebelumnya tidak di tampilkan)

<positions>

         <position>search</position>

         <position>hornav</position>

         <position>breadcrumb</position>

         <position>left</position>

         <position>footer</position>

</positions>

...........................................(kode setelahnya tidak di tampilkan)

Setelah penambahan kode

...........................................(kode sebeleum penambahan tidak di tampilkan)

<positions>

         <position>right</position>

         <position>search</position>

         <position>hornav</position>

         <position>breadcrumb</position>

         <position>left</position>

         <position>footer</position>

</positions>

...........................................(kode setelahnya tidak di tampilkan)

3. Menambah kode di file template_css.css

untuk file ini tidak selalu nama filenya sama, bisa saja filenya bernama layout.css atau template.css atau lainnya. Namun umumnya filenya bernama template_css.css. Jika nama file template_css.css tidak ada pada folder template yang di gunakan, maka bisa di cek nama file yang berektensi css dalam folder css. Gampangannya, jika pada file index.php original (sebelum di rubah) terdapat kode <div id="left">, maka cari di file css yang terdapat kode #left. Jika di temukan #left, maka tambahkan kode baru di bawahnya. Contohnya sebagai berikut.

Sebelum penambahan kode

............................................(kode sebelumnya tidak di tampilkan)

#left { float:left; width:30%; }

#content { float:left; width:70%; }

............................................(kode setelahnya tidak di tampilkan)

Setelah penambahan kode

............................................(kode sebelumnya tidak di tampilkan)

#left { float:left; width:20%; }

#content { float:left; width:60%; }

#right { float:left; width:20%; }

............................................(kode setelahnya tidak di tampilkan)