Ago 14

Para crear un nuevo template para Mambo o Joomla podemos seguir los siguientes pasos:

  1. 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

    Imagen guia para www.ecuadortudecides.com

  2. Creamos carpetas y archivos en blanco de tal forma que reflejen la siguiente estructura

    Estructura de archivos

    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:
      1. <?xml version="1.0" encoding="iso-8859-1"?>
      2. <mosinstall type="template" version="4.5.3">
      3. <name>nombreTemplate</name>
      4. <creationDate>10/05/07</creationDate>
      5. <author>Autor</author>
      6. <copyright>Licencia</copyright>
      7. <authorEmail>mail</authorEmail>
      8. <authorUrl>pagina web</authorUrl>
      9. <version>1.0</version>
      10. <description>Descripcion</description>
      11. <files>
      12. <filename>index.php</filename>
      13. <filename>template_thumbnail.png</filename>
      14. </files>
      15. <images>
      16. <filename>images/images.jpg</filename>
      17. </images>
      18. <css>
      19. <filename>css/template_css.css</filename>
      20. </css>
      21. </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

  3. 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.
    1. 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

    2. 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&gt

      Ahora deberá quedar asi:

      <div id="menu"><?php mosLoadModules ( 'menu' ); ?></div>
    3. Definimos el espacio para el contenido principal es decir donde la mayor parte del contenido se va a mostrar usando:
      <?php mosMainBody(); ?>
    4. 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

  4. 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
  5. Posiciones de módulos

  6. Comprimimos todos los archivos e instalamos nuestro template desde instaladores > universal
  7. 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

May 04

Para insertar el salto de página solo tenemos que escribir {mospagebreak} en el lugar donde deseamos que se realice la división.

Para los desarrolladores esta función es de gran utilidad pues nos permite crear paginación.

Solo tenemos que incluir de igual manera {mospagebreak} en los lugares donde necesitemos la división

Por ejemplo esto nos puede ser muy útil si estamos desarrollando un sistema de comentarios, podríamos definir que cada 10 comentarios se de un salto de línea.


Switch to our mobile site