Haz tu propio template para Joomla 1.5

Las plantillas ofrecen al usuario la posibilidad de elegir entre una gran variedad de diseños la que más se ajuste a sus necesidades, pero aunque existan tantas creaciones en websites como Template monster, no siempre se encuentra la que se desea. Para esto un desarrollador puede crear y personalizar sus propias plantillas.

Como se crea una plantilla para Joomla!
La creación y edición de plantilla es un proceso fácil y muy práctico. A continuación se describirá como crear una plantilla básica para Joomla, lo demás corre por cuenta de la imaginación del creador.

Una plantilla está compuesta por varias carpetas y archivos, cada uno de estos representa una parte de la plantilla. Algunos de estos archivos son:

Carpetas:

  • css: Contiene los estilos en cascada de la plantilla.
  • html: Contiene los archivos que funcionaran como plantilla específica para módulos y componentes. Con estos archivos se puede manejar la apariencia de los módulos y componente.
  • images: Contiene las imágenes usadas para el diseño de la plantilla.

Archivos:

  • index.php: El archivo principal, contendrá todo el HTML y directivas PHP de Joomla! para cargar el contenido (artículos, componentes, módulos, etc.)
  • templateDetails.xml: Permite que la plantilla sea reconocida en el back-end del CMS. En este archivo se agregaran los parámetros y las posiciones de disponibles para mostrar los módulos.
  • template_thumbnail.png: Es la imagen que actuará como pre visualización de la plantilla en la administración.
  • template.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta ‘css’. En la rama de Joomla! 1.0.x este archivo tenía el nombre de template_css.css
  • favicon.ico: Es el favicon que se usará en el sitio.

Para iniciar con la creación de la plantilla, es necesario crear la carpeta donde estará toda la información de esta, incluyendo los archivos mencionados anteriormente. Lo que se debe hacer es crear una carpeta en el directorio ‘templates’ de Joomla!, con el nombre que se desee, en minúscula y sin espacios; se crean dentro de esta las subcarpetas necesarias: HTML ,css, images…

Para crear el archivo templateDetails.xml:

El templateDetails.xml se puede dividir en cuatro partes: el contenido de Datos, Archivos y Posiciones.

Para el contenido de Datos se debe ingresar la siguiente información:

<name> Nombre de la plantilla</</name>
<creationDate> Fecha de creación </creationDate>
<author> Nombre del autor </author>
<copyright> Licencia </authorEmail>
<authorUrl> Web del autor </authorUrl>
<version> Versión </version>
<description> Aquí va la descripción, puede usarse HTML o texto plano </description>

Esta información es sobre la plantilla y el autor.
Para el contenido de Archivos se debe ingresar la siguiente información:

 

<files>
< filename > index.php </ filename>
< filename > templateDetails.xml </ filename >
< filename > favicon.ico </ filename >
< filename > template_thumbnail.png </ filename >
< filename > css/template.css </ filename >
</ files >

Esta información es sobre los archivos que se han utilizado para el diseño, para luego comprimir todo en ZIP y tener un instalador de la plantilla. Como se está trabajando directamente en Joomla no es necesario referenciar todos los archivos, pero se debe tener en cuenta hacerlo.
Para las posiciones se debe ingresar la siguiente información:

 

< positions >
< position > left </ position >
< position > right </ position >
< position > user3</ position >
</ positions >

Estas posiciones son las que se usaran para mostrar el contenido en el sitio.

Crear el index.php:

Para la creación del index.php, se debe insertar el HTML que formará la maquetación de la plantilla. Se debe crear un encabezado, un cuerpo y un pie de página.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”/templates//css/template.css” type=”text/css” />
</head>

<body>

<!– Contenedor –>
<div id=”contenedor”>

<!– Comienzo encabezado–>
<div id=”header”>
<h1><a href=”/index.php”></a></h1>
</div>
<!– Fin encabezado –>

<!– Comienzo navegacion–>
<div id=”navegacion”>
<jdoc:include type=”modules” name=”user3″ style=”xhtml” />
</div>
<!– Fin navegacion –>

<!– Columna izquierda –>
<div id=”izquierda”>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>
<!– Fin columna izquierda –>

<!– Comienzo contenido –>
<div id=”contenido”>
<jdoc:include type=”component” />
</div>
<!– Fin contenido –>

<!– Columna derecha –>
<div id=”derecha”>
<jdoc:include type=”modules” name=”right” style=”xhtml” />
</div>
<!– Fin columna derecha –>

<!– Comienzo pie de página –>
<div id=”footer”>
<!–Cargo el footer–>
<?php include_once(‘includes/footer.php’); ?>
</div>
<!– Fin footer –>

</div>
<!– Fin contenedor –>

</body>
</html>

 

Este es un ejemplo de una plantilla básica de tres columnas, una barra de navegación, un encabezado y un pie de página.

 

Crear css:

En la carpeta ‘css’ se crea un archivo template.css el cual tendrá los estilos que usará la plantilla. A continuación unos ejemplos de CCS:

{
padding: 0;
margin: 0;
}

body {
font-size: 62.5%;
font-family: Verdana, Arial, Sans-Serif;
color: #333;
background-color:white;
}

Para finalizar se crea el template_thumbnail.png que es la imagen que se pre visualiza de la plantilla, no hay un tamaño estándar para esto pero por general que utiliza de 200px de ancho y 150px de alto.

Si no quieres emplear tu tiempo en crear una plantilla te recomendamos buscar un template de calidad que distinga tu website de otros en Template Monster. Siempre podrás realizar más tarde las modificaciones necesarias.

#ceo: El top de los CEOs mejor pagados Un CEO gana millones de dólares al año aunque a veces su sueldo supone un exceso respecto a sus funciones, el tamaño de la empresa, la industria en la...
Usando Alertas Google para enterarse de todo al momento de ser publicado Google Alerts es una especie de asistente que nos avisa cada vez que es lanzado un contenido de nuestro interés. El funcionamiento del servicio no...
Scripts to install PHP and HTML frameworks CodeIgniter CodeIgniteris a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create f...
Nokia 808 PureView, renovando lo excelente… La firma finlandesa Nokia ya anunció en su momento que no dejaría de lado, en absoluto, las actualizaciones de los terminales con Symbian. El Nokia 80...
Google adquirió a Motorola En una movida que tomó a Wall Street por sorpresa, el gigante de internet compró al fabricante de dispositivos móviles, poseedor de un importante port...
QUÉ ES FTP FTP es el acrónimo para File Transfer Protocol (Protocolo de transferencia de archivos). Este protocolo utiliza TCP/IP para la transmisión de ...
Pinterest ahora en español Tras su llegada al mercado de las redes sociales en abril del año pasado Pinterest ha destacado en los últimos 6 meses por ser una de las comunidades ...
Servidor Dedicado versus servidor compartido Un servidor dedicado es uno que es utilizado únicamente por usted, este podría ser alojado en su empresa o en una ubicación dedicada al alojamiento d...
El 38% de los internautas chinos acceden solo desde el móvil Acceder a Internet a través de un dispositivo móvil es algo cada vez más común y en algunos países está creciendo su uso tan rápido que está cerca de ...
Twitter compra TweetDeck La red de microblogging se hace con los servicios de una de las herramientas que permiten sacar el máximo provecho de Twitter. Una fuente sin espec...
Cómo se crea una plantilla para Joomla
Tagged on: