Como crear un plantilla para Joomla! 3.2.2 desde cero

Esta es una nueva versión de mi post anterior “Como crear una plantilla para Joomla 1.6” y estará basada en la plantilla “protostar” que incluye el nuevo Joomla! Por defecto. En esta guía detallo como crear una plantilla y he trato de incluir solo las partes más elementales de modo que no importa si ya tenías experiencia o apenas vas empezando con Joomla, espero que les sirva a todos.

Lo primero es crear una carpeta con el nombre de la plantilla (en este ejemplo el nombre es jplan_PlantillaPrueba322). Dentro de esta carpeta debemos de crear un archivo llamado templateDetails.xml con un contenido más o menos como el siguiente (adecuándolo a las necesidades de cada quien). Por cierto el DOCTYPE dice 2.5, no se preocupen de eso por ahorita.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">

<extension version="3.2" type="template" client="site">

<name>jplan_PlantillaPrueba322</name>

<version>1.0</version>

<creationDate>20 Febrero 2014</creationDate>

<author>José Sotero Vibriezca Venegas</author>

<authorEmail></authorEmail>

<authorUrl>http://www.miviaweb.com</authorUrl>

<copyright>Copyright (C) 2014 www.miviaweb.com, Inc. All rights reserved.</copyright>

<description>TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<folder>css</folder>

<folder>images</folder>

<folder>js</folder>

<folder>language</folder>

</files>

<positions>

<position>banner</position>

<position>debug</position>

<position>position-0</position>

<position>position-1</position>

<position>position-2</position>

<position>position-3</position>

<position>position-4</position>

<position>position-5</position>

<position>position-6</position>

<position>position-7</position>

<position>position-8</position>

<position>position-9</position>

<position>position-10</position>

<position>position-11</position>

<position>position-12</position>

<position>position-13</position>

<position>position-14</position>

<position>footer</position>

</positions>

<languages folder="language">

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.ini</language>

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.sys.ini</language>

</languages>

</extension>

Si desean ir un poco más avanzado, en <files> pueden incluir los archivos component.php, error.php, favicon.ico y obviamente copiar estos archivos de la carpeta public_html/ templates/protestar. No olviden incluir los créditos necesarios si copian contenido de otros.

Nuevamente omití  toda la parte de configuración y parámetros para simplificar la creación de nuestra primer plantilla. Sin embargo esta ocasión si incluyo la parte de idiomas para irnos acostumbrando a usarlos.

Bueno creo que cada línea del contenido XML anterior se explica por sí sola, aun así les daré una breve descripción. Lo más importante a cambiar es NAME (nombre de su plantilla) y todo lo de FILES (son libres de agregar o quitar todos los archivos o carpetas que su diseño y plantilla requieran) siempre y cuando mantengan los archivos (index.php, templateDetails.xml, template_preview.png y template_thumbnail.png). Datos personales como AUTHOR, CREATION DATE, DESCRIPTION pues no son esenciales, aun así es bueno que lo hagan para referencia de ustedes mismo. Para los que no tienen experiencia con el diseño de plantillas para Joomla, es recomendable que los POSITION los mantengan como están, ya que estas son las posiciones que se usaran para desplegar los contenidos en la página. Si conforme avanza el desarrollo de la plantilla agregan más archivos o posiciones, no se olviden de regresar a templateDetails.xml y agregar los FILE o POSITION correspondientes. Aquí les dejo la descripción de cada position:

POSITION-0 = "Search"

POSITION-1 = "Navigation"

POSITION-2 = "Breadcrumbs"

POSITION-3 = "Top center"

POSITION-4 = "Unused"

POSITION-5 = "Unused"

POSITION-6 = "Unused"

POSITION-7 = "Right"

POSITION-8 = "Left"

POSITION-9 = "Unused"

POSITION-10 = "Unused"

POSITION-11 = "Unused"

POSITION-12 = "Unused"

POSITION-13 = "Unused"

POSITION-14 = "Unused"

Es recomendable usar el mismo position para cada cosa, así cuando cambiemos de template no hay que estar configurando nuevamente cada módulo.

Ahora debemos agregar los archivos template_thumbnail.png y template_preview.png, cada uno es la imagen de como se ve nuestro sitio (si no cuentan con dichas imágenes, este paso lo pueden realizar al final, solo no se les olvide jejeje). La primera es una imagen PNG de 206x150px, puede ser su logotipo o una imagen en miniatura de la página principal. La segunda puede ser una imagen PNG de 640x388px, también es una impresión de pantalla reducida de como se ve tu plantilla.

<?php

// No direct access.

defined('_JEXEC') or die;

?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/estilo.css" type="text/css" />

    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/ejemplo.js"></script>    

    <meta http-equiv='Content-Type' content='text/html; charset=windows-1252' />

    <title>Plantilla de prueba desarrollada por www.miviaweb.com</title>

</head>

<body>

<div>

        <div class='Header'>

        Contenido del Header

<jdoc:include type="modules" name="position-0" /><!--SEARCH-->

        </div>

        <div class='menu_tab'>

            <jdoc:include type="modules" name="position-1" /><!--HOR NAV-->

        </div>

<div id='main_content'>

            <jdoc:include type="modules" name="position-2" /><!--Breadcrumbs-->

            <jdoc:include type="modules" name="position-3" /><!--Top center-->

            

            <!-- Left Content -->

            <div id='left_content'>

            <jdoc:include type="modules" name="position-4" />

                <jdoc:include type="message" />

                <jdoc:include type="component" /><!--CONTENT-->

            <jdoc:include type="modules" name="position-5" />

            <jdoc:include type="modules" name="position-6" />

            </div>

            <!-- Right Content -->

            <div id='right_content'>

                <jdoc:include type="modules" name="position-7" /><!--Right-->

                <jdoc:include type="modules" name="position-8" /><!--Left-->

            </div>

            <!-- Footer -->

            <div class='footer'>

            <jdoc:include type="modules" name="position-9" />

                Contenido del Footer

            <jdoc:include type="modules" name="position-10" />

            </div>

            

            <jdoc:include type="modules" name="debug" style="none" />

</div>

</div>

</body>

</html>

En el lugar donde ubiquen la etiqueta jdoc de tipo component (<jdoc:include type="component" />) es donde se desplegaran los artículos que publiquemos. Las etiquetas jdoc de tipo modules (<jdoc:include type="modules" name="position-0" />) sirven para establecer las posiciones donde queramos desplegar diferentes módulos en la página. Si se fijan el atributo NAME corresponde con los POSITION del archivo templateDetails.xml

El diseño de index.php es muy sencillo, ustedes lo pueden hacer tan complicado como deseen. Hay más cosas que le pueden agregar a este archivo, para ello échenle un vistazo a la documentación de Joomla y al archivo index.php de alguna plantilla como protostar que viene con Joomla 3.2.2.

No olviden crear un archivo llamado “index.html” dentro de cada carpeta que creen, esto es para evitar que usuarios o robots mal intencionados puedan listar el contenido de nuestras carpetas. Para el contenido de este archivo basta con poner simplemente “<!DOCTYPE html><title></title>”. La carpeta principal de nuestro template no requiere este archivo porque ya contiene el archivo “index.php” y este hace el mismo trabajo.

A continuación creamos la carpeta “language” (no olvidar el archivo index.html) y dentro de esta a su vez la carpeta “es-ES” (no olvidar el archivo index.html) o el código de idioma que deseen. Dentro de esta última carpeta crear los archivos “es-ES.tpl_jplan_PlantillaPrueba322.ini” y “es-ES.tpl_jplan_PlantillaPrueba322.sys.ini” el contenido de ambos archivos puede ser el mismo:

TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION="Esta es la plantilla de prueba para Joomla! 3.2.2 creada por www.miviaweb.com"

También creamos la carpeta “js” y dentro los archivos “index.html” y “ejemplo.js”, el archivo JavaScript estará vacío en este ejemplo. También creamos la carpeta “images” y dentro solo el archivo “index.html”. Finalmente creamos la carpeta “css” y dentro los archivos “index.html” y “estilo.css”, el archivo CSS estará vacío en este ejemplo.

Listo ya podemos comprimir la carpeta de nuestro template en un ZIP e instalarla en Joomla!

Columnas o div’s que crecen iguales con CSS

Cuando estamos diseñando una página es muy común que deseemos la barra de menú a la izquierda o derecha y el contenido a un lado y que lo queramos hacer SIN tablas. En ocasiones no nos importa si los div’s, pero en otras, por cuestiones de estética deseamos que ambas estén del mismo tamaño y si a esto le agregamos que muchas páginas son de contenido dinámico y no tenemos idea de que tan grande va a crecer el Height de los div’s (y aunque no sean páginas de contenido dinámico puede resultar tedioso poner un Height en cada situación del sitio web) puede resultar un poco frustrante. Sin embargo la solución no es tan complicada como pensamos.

¿Por qué las tablas no son una solución? Bueno pues por que como comenta Pedro CM en su blog: “Es más fácil renderizar un contenido con div's que con tablas. Los div's son más rápidos, semánticos y accesibles.”.

Caso

Supongamos que tenemos un div Container y dentro de este 2 div’s, uno con la clase Side para el menú y otro con la clase Content para el contenido de la pagina. Además queremos que Side esté a la derecha de Content y que ambos crezcan del mismo tamaño.

Solución 1

Mas fácil de lo que podemos pensar es simplemente asignar table-cell a la propiedad display de las clases Side y Content y eso es todo, obtendríamos un resultado como la imagen 01.

Opcionalmente podemos asignar el valor table a la propiedad display de la clase Container para obtener un resultado como la imagen 02.

imagen 01

imagen 01

Código

<!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>
<title>Untitled Page</title>
<style type="text/css">
.Container
{
background-color:Red;
display:table;
}

.Side
{
background-color:blue;
display:table-cell;
}

.Content
{
background-color:Green;
display:table-cell;
}
</style>
</head>
<body>

<div class="Container">
<div class="Side">texto <br />texto <br />texto <br />texto <br /></div>
<div class="Content">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>

</body>
</html>

Solución 2

Desafortunadamente la solución uno no funciona con Internet Explorer 6, lastima era algo muy fácil. Aunque la verdad yo ya casi no diseño para ie6 (salvo algunas solicitudes especiales) pues el número de usuarios de ie6 ya no es el mismo que hace 3 años. Personalmente prefiero usar la solución uno, pero es cuestión de cada quien cual usar. El ejemplo de la solución 2 lo vi en: http://www.cssblog.es/columnas-equilibradas-en-css/

codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD = XHTML 1.0=20 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<style type="text/css">
body
{
background-color:Yellow;
}

#caja_izq
{
width: 850px;
margin: 20px auto;
color: #fff;
background-color: #4c9ab1;
overflow: auto;
}

#caja_der
{
width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}

.columna_izquierda
{
width: 280px;
float: left;
padding: = 20px;
position: relative;
margin-left: -350px;
}

.columna_derecha
{
width: 450px;
float: left;
padding: = 20px;
}
</style>
</head>
<body>

<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">texto <br />texto <br />texto <br />texto <br /></div>
<div class="columna_derecha">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>
</div>

</body>
</html>

Centrar un div horizontalmente

En el post anterior les mostraba como alinear un div verticalmente hacia abajo. Ok pero ¿para centrarlo horizontalmente? Bueno también es sencillo. Debemos de fijar las siguientes propiedades CSS: Al div contenedor del div que deseamos centrar la propiedad TEXT-ALIGN la ponemos en CENTER, al div que deseamos centrar fijamos la propiedad MARGIN al valor 0 AUTO. Con esto queda nuestro div centrado, pero su contenido también (y lo más probable es que no deseemos esto), si este es tu caso al div centrado también debes de agregarle la propiedad TEXT-ALIGN a LEFT o RIGHT (como desees).

Pues eso es todo. Aquí también te dejo un ejemplo para que lo pruebes por ti mismo:

 <!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>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <style type="text/css">

.content

{

width:600px;

height:600px;

background-color:#FFC;

/*---*/

text-align:center;

}

.info

{

width:300px;

height:300px;

background-color:#CCF;

/*---*/

margin:0 auto;

text-align:left;

}

</style>

</head>

<body>

<div class="content">

<div class="info">texto centrado</div>

</div>

</body>

</html>

Alinear un DIV hacia abajo

Si deseas que un div este alineado verticalmente hacia abajo solo necesitas 3 estilos con CSS y todo queda muy bien. Primero debes de fijar la propiedad POSITION del contenedor a RELATIVE, luego al div que deseas alinear hacia abajo las propiedades BOTTOM a 0px y POSITION a ABSOLUTE. Eso es todo, sencillo ¿no?

Aquí les dejo un ejemplo de como seria implementado:

<!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>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <style type="text/css">

.content

{

position:relative;

height:500px;

}

.copyright

{

bottom: 0px; 

position: absolute;

}

</style>

</head>

<body>

<div class="content">

<p>texto texto texto texto texto texto texto</p>

    

    <div class="copyright">Copyright Copyright Copyright Copyright Copyright</div>

</div>

</body>

</html>

Dar formato al código en Dreamweaver

¿Copiaste código de alguna página de internet y se pegó todo un desastre? Aquí tengo un tip para que en segundos quede todo solucionado.

En Dreamweaver en el menú Commands / Apply Source Formatting

Problema solucionado, espero que les sirva.

Saludos.