Como crear un template

Jun

2008

Como crear un template - 3

Escrito por Administrator

TEMA: COMO SE CREA UN Template JOOMLA - PARTE 3

• Como bien dije, solo queda por explicar la creación del archivo 'templateDetails.xml'. Además había quedado en poner un par de puntos que no pude mostrar anteriormente.

El archivo templateDetails.xml

○ Dicho archivo es una parte esencial para la instalación y reconocimiento de la plantilla en la administración de Joomla!. Además con él podemos brindar información sobre el autor, datos de contacto, licencia, etc. Básicamente tendremos las siguientes etiquetas y sus correspondientes datos:

XML

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall version="1.0" type="template">
    <name>Nombre del template</name>
    <version>Version del template</version>
    <creationDate>Fecha de creación</creationDate>
    <author>Nombre del autor</author>
    <authorEmail>E-mail del autor</authorEmail>
    <authorUrl>Url del autor</authorUrl>
    <description>Una breve descripción</description>
    <files>
           <filename>Archivos de la plantilla</filename>
    </files>
</mosinstall>

○ Más alla de los datos de autor y nombres, es muy importante que especifiquemos correctamente todos los archivos de la plantilla, con su correspondiente carpeta contenedora y formato de archivo. En caso de no especificar alguno, sencillamente ese archivo no será reconocido ni instalado...

• En nuestro caso, con la plantilla de ejemplo que estamos creando tendremos:

XML

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall version="1.0" type="template">
    <name>Green Joomla!</name>
    <version>1.0</version>
    <creationDate>04/2007</creationDate>
    <author>Leandro D´Onofrio</author>
    <authorEmail> donofrio.leandro@gmail.comEsta dirección de correo electrónico está protegida contra los robots de spam, necesita tener Javascript activado para poder verla </authorEmail>
    <authorUrl>http://www.leandrodonofrio.com/</authorUrl>
    <description>Sencilla plantilla en tonos verdes</description>
    <files>
      <filename>index.php</filename>
      <filename>templateDetails.xml</filename>
      <filename>template_thumbnail.png</filename>
      <filename>images/lista.gif</filename>
      <filename>css/template_css.css</filename>
    </files>
</mosinstall>

○ Guardamos el archivo y lo situamos en la carpeta raiz de la plantilla.

Queda crear la imagen 'template_thumbnail.png' que actuará de preview en la administración. Lo ideal es que sea una captura de la plantilla, con un tamaño aproximado de 200x150 px.

Una vez hecho, seleccionamos todos los archivos (index.php, templateDetails.xml, template_thumbnail.png) y carpetas (css e images) y los comprimimos en zip. Y eso es todo, ya hemos terminado una plantilla para Joomla!. Me quedan aclarar unos puntos más.

Notas aparte sobre index.php

.En la primera parte del tutorial, al crear el index, dentro de la cabecera teníamos:

PHP

<head>
<meta http-equiv="Content-Type" content="text/ HTML; charset=iso-8859-1" />

<?php mosShowHead(); ?>

<link href="/<?php echo $mosConfig_live_site;?>/templates/nombre_del_template/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

○ Lo cual no está mal, pero añadiendo un par de cosas podemos mejorarlo:

PHP

<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<?php
if ( $my->id ) {
initEditor();
}

mosShowHead();
?>

<link href="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

○ En primer lugar se incorporó la directiva PHP '<?php echo _ISO; ?>' para mostrar una codificación correcta en la plantilla. En segundo lugar además de mostrar el titulo, metatags y favicon con 'mosShowHead()', se agregó una función condicional, para que, si configuramos al sitio 'fuera de línea', aun asi podamos seguir viéndolo nosotros, no así las demás personas (veran el mensaje que hayamos especificado en la configuración). Finalmente se incorporó la directiva '<?php echo $mainframe->getTemplate(); ?>' en la ruta de obtención del estilo en cascada. Esta es la manera genérica para cargar un CSS en Joomla!, así no será necesario poner el nombre de la plantilla para cada index.php que hagamos.

• Mostrar un diseño si tal modulo está publicado. Para eso:

PHP

<?php if(mosCountModules('user1')) { ?>
<div class="caja">
<?php mosLoadModules('user1', -2); ?>
</div>
<?php } ?>

○ Se creó una función condicional, en palabras, si el modulo user1 está publicado - mosCountModules('user1') - mostramos todo que hay entre las llaves contenedoras (el div "caja" y el contenido del modulo). En caso de no estar publicado dicho modulo, no se mostrará nada (ni el div "caja" ni el modulo)

Notas aparte sobre el CSS

En la segunda parte del tutorial ponía énfasis en las reglas que vamos a incorporar al body del documento. El problema radica que el editor WYSIWYG de Joomla! toma estas reglas para mostrar el contenido a medida que lo vamos agregando. Si no podemos cumplir con esto, una solución es crear un estilo en cascada aparte y especificar en las opciones del editor WYSIWYG que cargue a este cuando estamos creando contenido. El archivo en cuestión se llamará 'editor_content.css', lo guardamos junto a 'template_css.css' dentro del directorio 'CSS' y tendrá estas reglas:

CSS

body{
margin:0;
padding:0;
text-align: left;
background: #FFF;
background-image: none;
}

○ Lo siguiente será ir a las opciones del editor (Administrador de Mambots --> Editor WYSIWYG TinyMCE) y en la opción Template CSS classes ponemos No. Guardamos y listo, cada vez que estemos trabajando con el editor, el contenido se mostrará según editor_content.css.

Ahora si, eso es todo, siéntanse libres de hacer con la plantilla lo que quieran.

»» Puedes desde aquí descargar green-Joomla (plantilla)

** Una valiosa contribución desde el Blog de Leandrodonofrio, que agradecemos desde Joomlatuto.

Agrega esta pagina a tu favoritos, en alguna "Red Social" de abajo

PUEDES AGREGAR ESTE ARTICULO EN TU WEB

Para crear un link a este articulo en tu web,
copia - pega el codigo de abajo en tu pagina.

Vista previa :

Como crear un template - 3
Lunes, 09 Junio 2008

Comentarios (2)

no es por ser pesado, pero se me olvidaba comentaros, si tienes activado el legacy(modo heredado) en el 1.5 si que se visualizan correctamente en la 1.5.

tendríais que aclarar en el título de este post, que las plantillas a crear serían para la 1.0.x no para la versión 1.5 de joomla. Ya que las funciones mosXXXXX ya no se invocan así en la 1.5

Un Saludo,
Gabriel.

yvComment v.1.17.1

Un avance - Más leídos