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, GavickPro o 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"
Agregar Posiciones a template para Joomla 1.5 (Artisteer 2)

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:
joomla


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:
personalizar


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.[/quote]

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

Esto ha sido todo por ahora, espero con esto poder devolver un poco a TARINGA de lo que he optenido de esta comunidad.
dijo:Aqui insertare un comercial, el mio. Me dedico al montaje de paginas web a precios accesible, si alguien le interesa, mandeme un mensaje privado y vemos si llegamos a algún arreglo!!

template


Quedo a sus órdenes para cualquier duda.

Mi nuevo post: Ancho de pagina-columnas dinamico (Joomla 1.5 - Artisteer 2)

51 comentarios - Agregar Posiciones a template para Joomla 1.5 (Artisteer 2)

@VICHO7
Super! buena info. Lastima que no puedo darte puntos, pero sí muchas gracias.
Por si acaso no sabes dónde encuentro un tuto similar para hacer que la plantilla de Artister tenga un ancho dinámico y no estático?
@UnJovenProfeta
Me pareció sumamente util tu aporte: mis 10 puntos de hoy son todos para vos!!!!
Bravo!!!
@UnJovenProfeta
Hay más trucos para artisteer? Premio con puntos!!!
@anaconda1976
Exelente post... hace mucho esperaba que alguien explique algo asi... todavia me queda por aprender a hacer mi propio template sin usar artister. gracias por la info !!!
@elpatroncito
Hola!
tu tutorial está muy bueno, pero, los modulos de la parte inferior de la pagina
¿como los agregas?
@tyriankorp
Barbaro el tutorial.
Lo que todavia no puedo descular es como hacer para lograr tener una posicion relativa. Me refiero en el header ubicar el modulo search encima como si fuera flotante donde yo lo posicionase atraves de un top y un left . me explico? o relativo a cualquier parte del template.

y otra mas....

por ejemplo el tamaño de la fuente o wide screen o normal esos que vienen integrados en el template como hacerlos(copiar y pegar claro) y ponerlos en el template. con copiar y pegar me refiero yo escribiria el codigo o modificaria el codigo de las acciones pero lo de ubucarlo en el template es lo que me cuesta. simil lo del search..

alguno se le ocurre?
@rubenpv
Increible bro...Gracias

Tenia ya 2 dias buscando la respuesta para poenr un modulo junto al otro....
Ahora nada mas me queda pregutnarte como le das estilo a las tablas???

Saludos y muchisimas gracias..
@DV42
Gracias por el post , me ha servido mucho , te dejo los diez que te hacen falta , bienvenido nfu!!
@SergioSnakeS3
Tienes algun post para bajar el Artister?? Estoy comenzando en esto, y baje varios Templantes que me gustaron, los instale, pero pues tienen los espacion para que ponga lo que yo quiera, como Logo y eso... Creo yo que necesito el Artister no?
Donde lo bajo?
@nastyk
bien manin +10
@jatruji
Alguien sabe como colocar el menu lateral con los mismos botones que el menu superior?
@leogol16
hola exelente tuto!!! pero estoy renegando hace rato para hacer q en el header dividirlo en 3 partes (posiciones) me das una mano???
un abrazo
@Daniel03
+10 Excelente a favoritos, sigo el post (y a tu usuario) y recomendado en Taringa, Twitter y Facebook

Gracias por compartir...
@proxy16 -2
el maldito no sirve para 1.6 de joomla
@mmaloso12 +1
RasAlGhul dijo:
proxy16 dijo:el maldito no sirve para 1.6 de joomla

Es por eso que especificamente dice &quot;para Joomla 1.5&quot; Sorry, aun no encuentro soluciones listas para 1.6. Inclusive yo no he trabajado mucho con el.


igual busco info para 1.6
@Danielmania8 +1
Amigo, YO creé una plantilla con este programa(la versión 3.0). Y tengo un pequeño problema con el estilo de texto del primer banner. (banner 1) , Resulta que instalé una extensión llamada &quot;HighLighter GK1&quot;, que hace mover con efectos de transiciones títulos de articulos en un minibanner(qu en mi caso se ubica en el Banner 1). El problema es que siempre aparece el subrayado del link. Y ya modifique todas las instruciones Underline del archivo template.css. y no se quitan el condenado subrayado. Se que el problema esta en el estilo del Banner1 pero de programación no se mucho, es más, es un milagro que haya llegado hasta lo que te muestro en este link (http://www.danitecnomania.netii.net). Espero me puedas ayudar, ya sea respondiendo por aqui, porque los mensajes privados en taringa tienen problemas y no llegan. Saludos. ahhh mi +10
@Danielmania8 +1
Amigo, ahora como puedo modificar el código del módulo, puesto que las opciones que trae el módulo &quot;HighLighter GK1&quot;, no trae nada referido al subrayado. De antemano gracias por tu paciencia y atención.
@cheetara +1
cual es el problema q a mi no me funciona no hay caso cuando quiero instalarla me sale error tipo de archivo desconocido
@ksjuancar
Bárbaro, no sabía ni como empezar y me has dado lo que ando buscando el tutorial.

Gracias +10 y a fav
@darius2001
Muy bueno el post, me es de mucha ayuda. Pero quiero hacerte una consulta: diseñe una plantilla con artister 3 y le puse el menu sobre la cabezera del sitio, el asunto es que tambien queria poner otro menu de diseño identico al superior pero por debajo de la cabezera, osea menu-cabezera-menu. la unica opcion era usar la posicion banner1 para colocar el segundo menu, pero cuando lo pongo ahi no se ve como el de arriba. que me recomiendas que haga? porque ya le cree una nueva posicion llamada &quot;menu&quot; en el xml y tambien varie el index pero no se que poner en las css... deberia hacer que la nueva posicion tomara las css del user3 que es donde esta el menu superior? si es asi como lo indico?
Te agradezco mucho de antemano.