Para crear un nuevo template para Mambo o Joomla podemos seguir los siguientes pasos:
-
Diseñamos nuestro template en un editor de imagen es (Por ejemplo Fireworks) de tal forma que podamos fácilmente definir los colores, las secciones, tipografía, dimensiones. Las dimensiones del lienzo que usaremos serán de 770px. x 800px si deseamos que nuestro template pueda ser visto en resoluciones desde 800 x 600
Notemos que en esta etapa aun no codificamos ningún archivo HTML, la imagen creada nos servirá de guía para el siguiente paso
-
Creamos carpetas y archivos en blanco de tal forma que reflejen la siguiente estructura

Donde
- template_thumbnail.png: Es una captura de la imagen creada en el paso anterior, escalada a un tamaño de 250px de ancho.
- templateDetails.xml:Contiene la informacion del template, posee:
<?xml version="1.0" encoding="iso-8859-1"?><mosinstall type="template" version="4.5.3"><name>nombreTemplate</name><creationDate>10/05/07</creationDate><author>Autor</author><copyright>Licencia</copyright><authorEmail>mail</authorEmail><authorUrl>pagina web</authorUrl><version>1.0</version><description>Descripcion</description><files><filename>index.php</filename><filename>template_thumbnail.png</filename></files><images><filename>images/images.jpg</filename></images><css><filename>css/template_css.css</filename></css></mosinstall>
Descargar el código: xmlMambo
Notemos que en los campos files e images, debemos incluir la ubicación de todos los elementos que usamos en nuestro template para que sean cargados por el CMS
- Ahora el archivo html (index.html) generado en la maquetación debemos renombrarlo por index.php e incluir etiquetas propias del CMS, teniendo en cuenta cada sección.
- La primera etiqueta a incluir es la cabecera:
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); // needed to seperate the ISO number from the language file constant _ISO $iso = explode( '=', _ISO ); // xml prolog echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php mosShowHead(); ?> <?php if ( $my->id ) { initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" /> <title><?php echo $mosConfig_sitename; ?></title> <link href="<?php echo $mosConfig_live_site; ?>/templates/LA_CARPETA_DE_TU_TEMPLATE/css/template_css.css" rel="stylesheet" type="text/css"/> </head>Notemos que esto sustituye todas las etiquetas hasta head. El único parametro que debemos cambiar es LA_CARPETA_DE_TU_TEMPLATE, esta debera coincidir con el nombre (name) que definimos en el archivo templateDetails.xml
- Ahora tenemos que especificar las zonas dinamicas de nuestro template usando:
<?php mosLoadModules ( 'SECCION' ); ?>
El parámetro sección lo podemos poner a nuestro criterio es decir por ejemplo para el espacio donde ira el menu podremos poner MENU como nombre de sección, el único limitante de estos nombres es que no debe sobrepasar los 10 caracteres.
Esta etiqueta debe reemplazar el contenido generado en la maquetación por ejemplo si antes teníamos:
<div id="menu"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p class="menuItem"><a href="#">inicio</a></p></td> <td><p class="menuItem"><a href="#">Galería</a></p></td> <td><p class="menuItem"><a href="#">Tarifas</a></p></td> <td><p class="menuItem"><a href="#">contacto</a></p></td> </tr> </table> </div>
Ahora deberá quedar asi:
<div id="menu"><?php mosLoadModules ( 'menu' ); ?></div>
- Definimos el espacio para el contenido principal es decir donde la mayor parte del contenido se va a mostrar usando:
<?php mosMainBody(); ?>
- Los siguiente es actualizar la referencia de los archivos con:
<?php echo $mosConfig_live_site; ?>/templates/
Esto es util si por ejemplo cargamos alguna imagen directamente desde el template
- La primera etiqueta a incluir es la cabecera:
- Ahora ingresamos las secciones que usa el template en el CMS. Esto la hacemos desde administración en site > administración de plantillas > posiciones de módulos o Site>template mananger > module positions
- Comprimimos todos los archivos e instalamos nuestro template desde instaladores > universal
- Ahora solo resta definir como template por default al creado y listo.

Para ver el un ejemplo del template creado usando este tututorial podemos visitar www.ecuadortudecides.com

Últimos comentarios