 | TÍTULO: Personaliza tu propia plantilla de Joomla | | RESUMEN: Este artículo te enseña, te muestra como, partiendo de una plantilla "base" podemos crear nuestra propia plantilla de Joomla! y así personalizar al 100% nuestro gestor de contenidos. | | AUTOR: Javier Martínez Avedillo |
Personaliza tu propia plantilla de Joomla Introducción: Este artículo te enseña, te muestra como, partiendo de una plantilla "base" podemos crear nuestra propia plantilla de Joomla! y así personalizar al 100% nuestro gestor de contenidos. No nos adentraremos profundamente en aspectos teoricos e iremos directos a lo práctico. Por lo tanto en este artículo no encontraremos ni teoría acerca de CSS, ni teoría de php, ni de html. Por otra parte se requiere tener ciertas nociones de esos estandares para poder desarrollar nuestra plantilla. Empezaré diciendo que plantilla en ingles es template, así que para cualquier busqueda de informacion en "la red" lo mejor es que busqueis "Joomla! template". Como son y como funcionan las plantillas de Joomla: Como algunos ya sabeis, uno de los aspectos mas interesantes de la creación de una página web sobre un gestor de contenidos como Joomla! (CMS, Content Management System) es la separación de los contenidos, de lo que es la maquetación y el aspecto. Esto otorga mucha libertad, ya que un cambio en el diseño deja de ser una modificación drástica para convertirse en una tarea que se puede abordar con cierta frecuencia. Las plantillas de Joomla se almacenan dentro de la carpeta "/templates". Esta carpeta tiene la siguiente estructura y archivos:  Veamos que es, y que papel juega cada artículo: templatedetails.xml Es un fichero xml que describe algunos detalles de la plantilla que son usados por Joomla! para mostrar información sobre la misma en el "administrador de plantillas del sitio". A continuación se muestra la estructura interna de dicho archivo: <?xml version="1.0" encoding="iso-8859-1" ?> - <mosinstall type="template"> <name>nombre_de_la_plantilla</name> <author>Nuestro_nombre</author> <copyright>This template, code and CSS is licenced under the Creative Commons Attribution-NonCommercial-ShareAlike License. Design by nosotros_mismos</copyright> <authorEmail>javier</authorEmail> <authorUrl>observatorio.cnice.mec.es</authorUrl> <description>Bonita descripción de nuestra plantilla, bla, bla!!!</description> <filename>template_thumbnail.png</filename> <filename>index.php</filename> </files> <filename>css/template_css.css</filename> </css> </mosinstall> Foto miniatura de la plantilla index.php Este fichero es la plantilla propiamente dicha. Nos adentraremos mas en su contenido y estructura en el siguiente punto. /css/template_css.css La hoja de estilos de nuestra plantilla. Su estructura es como la de cualquier hoja de css, ahora bien la grán cantidad de estilos definidos hace que sea algo complejo su manejo. Es recomendable tener a mano alguna buena herramienta de edición de hojas de estilo para modificarla sin volverse un poco loco. Creando nuestra propia plantilla: Creando el index.php Vamos a comenzar editando nuestro fichero index.php. Digo editando porque en mi caso acostumbro a partir de otras plantillas para hacer la mia. De todas maneras podemos crear la nuestra partiendo totalmente de 0. El fichero index.php debe comenzar de la siguiente manera: <?php /** * Aqui, podemos poner algún detalle de la plantilla * Plantilla para Joomla! (funcionaría en Mambo) * @copyright (C) 2006 by nosotros_mismos */ defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); 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 if ( $my->id ) initEditor(); ?> < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <?php mosShowHead(); ?>
<?php echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/carpeta_de_mi_plantilla/css/template_css.css" type="text/css"/>" ; ?> <?php echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/templates/carpeta_de_mi_plantilla/images/favicon.ico" />" ; ?> <style type="text/css"> <!-- body { A partir de aquí, una vez abierto el "body" empieza la parte creativa. Antes de "liarnos" a diseñar, vamos a revisar un aspecto fundamental y muy sencillo de las plantillas de Joomla!. Las plantillas de nuestro gestor deben contener los marcadores de posición donde se van a cargar nuestros contenidos y módulos. No entraremos sobre el significado de esto porque se da por conocido el sistema de módulos de Joomla!. Las posiciones donde se cargan nuestros módulos sabemos que se pueden llamar "left", "right", "user1", "user2", "top" etc... Lo que veremos ahora es como se definen esas posiciones en la plantilla. Debemos incluir los siguientes fragmentos de código alli donde queramos que se carguen los respectivos módulos y contenidos. <?php mosMainBody(); ?> Incluiremos este fragmento alli donde queremos que se carguen los contenidos prncipales. El texto de los artículos. <?php mosLoadModules ( 'left' ); ?> <?php mosLoadModules ( 'right' ); ?> <?php mosLoadModules ( 'top' ); ?> Utilizaremos estos fragmentos para marcar la posición de esos "punteros" para situar módulos. A partir del "body" que habiamos dejado abierto, creamos un documento html a nuestro gusto poniendo en las posiciones deseada los fragmentos de código que acabamos de ver. La siguiente figura muestra un ejemplo de diseño con una tabla, una imagen a modo de banner y seis posiciones marcadas.  No debemos olvidar cerrar la etiqueta "body" y la etiqueta "html" al terminar nuestro diseño. Con estas nociones y teniendo en cuenta que básicamente el fichero index.php es practicamente una página html normal podemos hacer muchas pruebas y probar a incluir código javascript, flash o lo que queramos. Modificando la hoja de estilos: En este caso, si que vamos a partir de una css ya creada para modificarla a nuestro gusto. En todo caso partiremos de una css bastante estandar que podremos mantener intacta si queremos. Esta css define unas imagenes para los botones de menu. Son dos imagenes, una para cuando el boton esta sin pulsar y otra para cuando se pasa el ratón por encima. Estas imagenes se llaman (en este caso) menu.gif y menu2.gif. Podemos editarlas a nuestro gusto para que se ajusten a nuestro gusto o necesidad. En todo caso las pruebas que se pueden hacer con el fichero de estilos son infinitas. Instalando nuestra plantilla: Para que nuestra plantilla este disponible bastará con subir a la carpeta templates de nuestro siti web nuestra carpeta con los ficheros y carpetas que ya hemos nombrado. Despues desde el administrador de plantillas del sitio web, seleccionamos nuestra plantilla y la asignamos por defecto al sitio. Descarga de ficheros: Bajate la plantilla con todos los ficheros que hemos mencionado y usala de punto de partida. Hemos añadido a la plantilla un bonito efecto de imagen aleatoria que rapidamente sabrás modificar a tu gusto. Para terminar: La creación de páginas con Joomla! es muy entretenido y comprobaras que con muy poco esfuerzo tendras webs con un aspecto "profesional". Si quieres más información, en internet encontraras miles de páginas con instrucciones, ejemplos etc... Puedes descargarte cientos de plantillas para instalar o modificar desde la web http://www.joomlaos.de
Dificultad:  | 
Bienvenido Invitado
Login:
