Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Cómo Se Crea Una Plantilla para Joomla
Cómo Se Crea Una Plantilla para Joomla
y y
css: Contiene los estilos en cascada de la plantilla. html: Contiene los archivos que funcionaran como plantilla especfica para mdulos y componentes. Con estos archivos se puede manejar la apariencia de los mdulos y componente.
Archivos: index.php: El archivo principal, contendr todo el HTML y directivas PHP de Joomla! para cargar el contenido (artculos, componentes, mdulos, etc.)
templateDetails.xml: Permite que la plantilla sea reconocida en el back-end del CMS. En este archivo se agregaran los parmetros y las posiciones de disponibles para mostrar los mdulos.
y y
template_thumbnail.png: Es la imagen que actuar como pre visualizacin de la plantilla en la administracin. 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 tena el nombre de template_css.css
Para iniciar con la creacin de la plantilla, es necesario crear la carpeta donde estar toda la informacin 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 minscula y sin espacios; se crean dentro de esta las subcarpetas necesarias: HTML, css, images
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 informacin: <name> Nombre de la plantilla</</name> <creationDate> Fecha de creacin </creationDate> <author> Nombre del autor </author> <copyright> Licencia </authorEmail> <authorUrl> Web del autor </authorUrl> <version> Versin </version> <description> Aqu va la descripcin, puede usarse HTML o texto plano </description> Esta informacin es sobre la plantilla y el autor.
<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 informacin es sobre los archivos que se han utilizado para el diseo, 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.
< 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 creacin del index.php, se debe insertar el HTML que formar la maquetacin de la plantilla. Se debe crear un encabezado, un cuerpo y un pie de pgina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.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 pgina --> <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 bsica de tres columnas, una barra de navegacin, un encabezado y un pie de pgina.
Crear css:
En la carpeta 'css' se crea un archivo template.css el cual tendr los estilos que usar la plantilla. A continuacin 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 tamao estndar 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 podrs realizar ms tarde las modificaciones necesarias.