Agregar Posiciones a template para Joomla 1.

5 (Artisteer 2)

Por donde comenzar, todos los que conocemos de joomla hemos alguna vez querido hacer nuestros propios templates, y hacer que el

mismo sea mas dinamico, obviamente todos hemos visto las plantillas profesionales diseñadas

por JoomArt, GavickProo Rockettheme. Los cuales nos muestran funcionalidad y buen gusto, asi como una extensa y detallada

maquetación en CSS. 

Quizas la herramientas que mas sencillo nos haga el diseño de un templata para Joomla 1.5 sea precisamente Artisteer, que en su

versión 2.3.0.23326 Edición Estandar nos permite creear increibles diseños de templates. Con colores, fondos, tipos de letras e

imagenes. Pero cada template generado es producido con las mismas posiciones. 

Es aquí donde nos preguntamos ¿Donde esta el ROTATOR o la posición de LOGIN?

Pues bien. Esas no existen en los templates pregenerados de Artisteer por lo que si queremos generarlos debemos de ponerlas

nosotros mismos! 

Bien.. asi que comencemos con nuestro trabajo. Necesitaremos: 

1. Un template a tres columnas generado con Artisteer version 2.3.0.23326, con disposición de la página tipo "Menú - Encabezado" 

2. Un editor de html o php (Dreamweaver, Notepad ++) 

3. Un servidor de web local (yo en lo personal uso WAMPSERVER) 

4. Paciencia. 
Lo primero: determinar las posiciones existentes en el template. Por regla general, Artisteer nos dara un template con las siguiente

secciones. 

En la sección superior: 

USER3 = Contendra el Menu superior 

HEADER = Contiene el nombre de la pagina, y el subtitulo o slogan, además de la imagen de header 

BANNER1 = Primer Espacio para banner. 

TOP 1, 2 y 3 = Espacios de usuario (33 %) 

LEFT = La famosa columna izquierda del template. 

En la columna media: 

BANNER2 = Segundo espacio de banner, insertado sobre la seccion de contenidos y entre ambas columnas. 

BREADCRUM = Posicion por defecto de la ruta de acceso, ubicado sobre la seccion de contenidos. 

USER1 y 2 = Secciones de usuario (50%) 

BANNER3 = tercera posicion de banner, insertado antes del contenido. 

CONTENIDO = El cuerpo completo de nuestro sitio web, conocida tambien como sección de blog. 

BANNER4 = Cuarta posicion de banner 

USER4 y 5 = Dos posiciones de usuario mas (50%) 

BANNER5 = Ultima posicián de banner en el cuerpo central 

RIGHT = La famosa columna derecha del template. 

En la seccion final: 

BOTTOM1, 2 y 3 = Secciones de usuario, del 33% del ancho cada una. 

BANNER6 = Ultima posicion de banner. 

SYNDICATE - COPYRIGHT = Sección de suscripcion a nuestro Fedd RSS y Copyright 

Para una muestra mas gráfica, ve esta imagen: 

Queremos agregarle las siguientes posiciones: 

BANNER = posición de banner en la parte superior, antes de nuestro encabezado. 

LOGIN = posición de acceso de usuario, junto al menu superior, ideal para un modulo de acceso por java. 

ROTATOR = posición independiente ideal para un modulo de NEWSHOWCASE. 

FLASHNEWS = Posicion para banderin de noticias rapidas. 

SEARCH = Posicion destacada para el cuadro de busqueda, junto al flashnew. 

De tal manera que nuestro template quede asi: 

Comenzamos: 

Paso No 1: copiaremos los archivos index.php y templateDetails.xml de nuestro carpeta del template que generamos con

Artisteer. Esto es muy importante ya que nos quedaremos con una copia de seguridad de nuestros archivos originales, asi en caso de

cualquier falla, podemos volver a comenzar. 

Paso No 2: abrimos el archivo templateDetails.xml, es donde agregaremos las nuevas posiciones. Esto se hace casi al final del archivo

donde encontraremos la declaracion 

<positions> 

<position>user3</position> 

<position>top1</position> 

<position>top2</position> 
</positions> 

Lo único que tenemos que hacer es agregar la posicion deseada en una linea nueva de la lista, dentro de las declaraciones de

posiciones, en el siguiente formato <position>NOMBRE_DE_LA_POSICION</position> 

Siendo asi agregaremos: 

<position>banner</position> 

<position>login</position> 

<position>rotator</position> 

<position>fashnews</position> 

<position>search</position> 

Salvamos el archivo y lo cerramos. 

Paso No 3: abrimos el archivo index.php, es en este archivo donde haremos la mayoria de los cambios, esto se debe a que es donde

se determina la ubicación de las posiciones. 

Agregaremos primero el BANNER superior, ubicando la linea 31 del codigo php, donde encontraremos la instrucción: 

<div id="art-main">

Justo debajo de ella agregaremos: 

<jdoc:include type="modules" name="banner" style="artstyle" artstyle="art-nostyle" />

Esta instruccion agregara el modulo BANNER con sus respectivos estilos css (obviamente estos estilos se determinan al crear la plantilla

con Artisteer) 
Agregamos ahora la posición de LOGIN, esta posicion es un poco más latosa, dado que dependera de hacia donde cargamos nuestro

menu (izquierda, derecha o contrado), locarizaremos la linea 44, donde se encuentra la instrucción: 

<jdoc:include type="modules" name="user3" />

La sustituiremos por las siguientes líneas: 

<table class="position" cellpadding="0" cellspacing="0" border="0"> 

<tr valign="top"> 

<td width="20%"> <jdoc:include type="modules" name="login" /><td> 

<td width="80%"> <jdoc:include type="modules" name="user3" /><td> 

</tr> 

</table> 

Esto nos agregara la posicion LOGIN ocupando solo el 20% del ancho total, y la posición USER3 con el 80%, se uso en este caso de

esta manera debido a que el menu ubicado en USER3 esta cargado hacia la derecha. 
En dado caso que nuestro menu este cargado hacia el otro lado, se ha de invertir el orden en el que se declaran las celdas de la tabla. 

dijo:

Nota: el codigo generado por Artisteer es en CSS sin tablas, pero no esta preparado para ubicar un modulo en esta posicion, asi que

debemos de declarar las tablas, no afecta a ninguna otra sección.

Ahora agregaremos la posición ROTATOR, la cual la insertaremos aproximadamente en la linea 60 del codigo, donde encontraremos la

instrucción: 

<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />

La que sustituiremos por: 

<jdoc:include type="modules" name="rotator" style="artstyle" artstyle="art-article" />

Como veran estamos sustituyendo la posición original de BANNER1 por la nueva posicion de ROTATOR, y aunque bien pudimos

haber insertado el modulo de NEWSHOWCASE en la posicion BANNER1, esta no tiene formato. La declaracion artstyle="art-

article" en la nueva linea nos pone un borde al modulo que lo hace ver mas atractivo, mientras que la declaración artstyle="art-
nostyle" en la línea original lo mantiene sin borde. Es cuestion de gustos, asi que prueben a ver como les agrada mas. 

Inmediatamente debajo insertaremos las posiciones NEWFLASH y SEARCH además que reposicionaremos BANNER1 (no tiene caso

perder una posición ya declarada), en modulos separados debajo de los tres TOPS, en la linea 61 encontraremos la instruccion: 

<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>

Justo debajo de ella, insertaremos las dos siguientes líneas: 

<?php echo artxPositions($document, array('newsflash', 'search'), 'art-article'); ?>

<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />

La primera nos creara el espacio para las dos posiciones que queremos insertar y el segundo es la misma linea que sustituimos al

insertar el ROTATOR. 

Con esto la edicion de nuestro código esta completa y la pagina debera de lucir tal como se muestra en la imagen (Claro, con los

colores que hayan elegido) 

Como verán esta edición no mueve en ningún momento el codigo CSS del template, asi que ningún modulo adicional se vera afectado,

lo he probado en MOZILLA FIREFOX 3.6 e INTERNET EXPLORER 8 y en ambos funciono bien. 

Este escrito pretende ser una guia para insertar las posiciones, obviamente con algo mas de paciencia podremos crear a partir del

template de Artisteer uno más complejo y que cumpla mejor nuestros requerimientos. Cabe destacar que los mismos parametros con

los que se insertaron las posiciones deseadas funcionarian para cualquiera de los otros layouts generados por el software, solo tienen
que identificar las lineas que equivalen a cada una de las instrucciones ya señaladas. 

Para la edición de la pagina y probar su funcionalidad, use además estos modulos de Joomla: 

Modulo de LOGIN: Core Design Login Module y Core Design Scriptegrator plugin 

Modulo de ROTATOR: Lof ArticlesSlideShow module 

Modulo de FLASHNEWS: Rok-Newsflash 

Ancho de pagina-columnas dinamico (Joomla 1.5 + Artisteer 2)

Saludos a todos: 

En mi anterior y primer post en esta comunidad, hable de como agregar nuevas posiciones a un template para Joomla 1.5 creado con Artisteer
version 2.3.0.23326. Si te lo perdiste, pues solo da clic AQUI. 

Ahora, respondere a una duda dejada en ese post, que es como hacer que el ancho del área de contenidos de la pagina y por lo tanto de las
columnas relacionadas, sea dinámico (se ajusten porcentualmente al ancho de pantalla) 

Como recordaremos los templates generados con Artisteer contienen un codigo CSS maquetado de una manera muy particular, cada seccion esta
identificada con el prefijo ART lo que es clara referencia al creador del template. Tambien recordaremos que los contendores de la información y el
ancho de pagina estan delimitados por un ancho fijo que elegimos al crear el template,en la seccion ancho del menu HOJA de Artisteer. 
Permitiendonos crear templates desde 500px hasta 1500 px de ancho. 

Todos sabemos que el ancho de el área real de contenidos de una pagina es un asunto delicado, dado las diferentes resoluciones de pantalla y
tamaños de monitor que hay en el mercado, que más quisieramos que todos los usuarios de internet que visiten nuestro sitio tuvieran un monitor
full HD de pantalla ancha, pero nos basta con asomarnos a nuestro Ciber-café más cercano para darnos cuenta que no es así. 

Una de las soluciones mas simples es crear un contenido dinámico, que se ajuste automáticamente a la pantalla de nuestros usuarios y que nos
permita que el ancho de la página no se vuelva una molestia para el visitante de nuestro sitio. 

Que necesitamos esta ves, exactamente lo mismo que la ves pasada: 

1. Un template a tres columnas generado con Artisteer version 2.3.0.23326, con disposición de la página tipo "Menú - Encabezado" 
2. Un editor de html o php (Dreamweaver, Notepad ++) 
3. Un servidor de web local (sigo usando WAMPSERVER) 

Paso No1: notaremos que el ancho de la pagina esta delimitado por el tamaño que determinamos al crear el template, en este caso es de 1087px. 

Lo primero que haremos será abrir el archivo index.php de ubicado en la carpeta de nuestro template (aunque esta vez el cambio en este archivo
será mínimo, no esta de más que lo respalden). Entre las lineas 15 y 23 apróximadamente están declarados los archivos CSS que se incluyen en el
template, agregaremos solamente la siguiente linea: 

<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/columnas.css" />

Guardamos nuestro archivo y lo cerramos. 

Paso No 2: Como ya se habran imaginado, el truco consiste en crear este nuevo archivo CSS con las instrucciones necesarias para sobrepasar las
limitantes originales del template, esto es rapido de hacer, nos meteremos dentro de la carpeta CSS de nuestro template y crearemos un archivo
llamado columnas.css 

Haremos este archivo, para no afectar el codigo CSS original, debido a que los parametros que editaremos estan dispersos a través de todo el
archivo template.css, de esta manera cualquier error será mucho más fácil de corregir. 

Abriremos el archivo e insertaremos este código tal como esta a continuacion: 

/*Ancho total de la pagina */ 
.art-Sheet { width: 100% !important; } 
Este codigo determinara el ancho total del área de contenidos con respecto al área total de la pantalla. 

A continuacion editaremos el header y el footer de la pagina, a través del siguiente código. 

/*Encabezado y pie del sitio*/ 
div.art-Header { width: 100% !important;} 
div.art-Header-jpeg{ width: 100% !important;} 
.art-Logo { width: 100% !important; } 
.art-Footer { width: 100% !important;} 
Este código es totalmente opcional, dependera de la vista que se pretenda dar al sitio, sin embargo cabe destacar que en la imagen jpg generada
para el encabezado es siempre del tamaño delimitado al crear el template, por lo que si el ancho de la pagina es más grande que el ancho original,
este se vera más pequeño. 

Por último, ingresaremos los valores que determina el area de contenidos: 

/* Layout del contenido */ 
.art-contentLayout { width: 100% !important; } 
.art-contentLayout .art-sidebar1 { width: 25% !important;} 
.art-contentLayout .art-content { width: 50% !important;} 
.art-contentLayout .art-content-sidebar1 { width: 75% !important; } 
.art-contentLayout .art-content-sidebar2 { width: 75% !important; } 
.art-contentLayout .art-content-wide { width: 100% !important; } 
.art-contentLayout .art-sidebar2 { width: 25% !important; } 
Notaran que todas las instrucciones tienen la instruccion !important esto se hace para que el codigo CSS de este archivo tome prioridad sobre
cualquier otro código CSS que se este usando. 

El código completo de nuestro archivo quedara de la siguiente manera: 

dijo:

/*Ancho total de la pagina */ 

.art-Sheet { width: 100% !important; } 

/*Encabezado y pie del sitio*/ 

div.art-Header { width: 100% !important;} 
div.art-Header-jpeg{ width: 100% !important;} 
.art-Logo { width: 100% !important; } 
.art-Footer { width: 100% !important;} 

/* Layout del contenido */ 

.art-contentLayout { width: 100% !important; } 
.art-contentLayout .art-sidebar1 { width: 25% !important;} 
.art-contentLayout .art-content { width: 50% !important;} 
.art-contentLayout .art-content-sidebar1 { width: 75% !important; } 
.art-contentLayout .art-content-sidebar2 { width: 75% !important; } 
.art-contentLayout .art-content-wide { width: 100% !important; } 
.art-contentLayout .art-sidebar2 { width: 25% !important; }

Los ajustes que se deseen hacer con respecto al ancho total del área de contenido con la pantalla, deben hacerse en la declaracion .art-Sheet {} ya
que esta determinara el ancho total del sitio, las demás declaraciones son para que los modulos que integran el layout del sitio, se ajusten al
parametro indicado. 

Aquí una muestra del la declaracion .art-Sheet original y su modificación al 100% y al 60%. 
Notese que en el caso 100% la imagen jpg del encabezado se ve mas pequeña, esto se debe a que el tamaño corresponde al establecido por
Artisteer al momento de la creación del template. Lo reitero porque en algunas ocasiones se debera recurrir a editar o sustituir el
archivo header.jpg contenido en la carpeta images de nuestro template. 

Vuelvo a reiterar que este metodo funciona con todas las plantillas generadas con Artisteer. 

Ahora, para finalizar, un pequeño detalle que no mencione en el post pasado. 

Quizas hayan notado, quizas no que el encabezado de la pagina es diferente en los dos ejemplos que puse de las posiciones deseadas,en el primero
el titulo del sitio coincide con las letras difuminadas en el JPG, en el segundo aparece otro titulo y las letras difuminadas son diferentes. 

A que se debe esto, bueno sencillamente a que en el Artisteer al crear un template nos pide el nombre del sitio y lo coloca como logo en el header,
y despues de una edicion del jpg del encabezado, quedo integrado con el fondo. Pero en el ejemplo efectue una pequeña edición más que no
mencione. 
Cambié ese encabezado por el nombre del sitio web establecido en la instalación de Joomla 1.5 y esto se hace de manera muy sencilla. 
En el archivo index.php se sustituye la instrucción: 
<h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Ariel Shinigami</a></h1> 
Por la siguiente instrucción: 
<h1 id="name-text" class="art-Logo-name"><a href="index.php"><?php echo $mainframe->getCfg('sitename');?></a></h1> 
La segunda instrucción devuelve el nombre del sitio que esta contenido en el archivo configuration.php de la carpeta raiz del sitio web. 
Más allá del saber