Desarmando template Joomla + Artisteer

Una de las limitantes para editar, modificar o expander un template de Joomla creado con Artisteer es el escaso conocimiento de la estructura interna.

En un post anterior, mostre como , sin embargo solo son las instrucciones con las que joomla reconoce las posiciones dentro del template y como colocarlas.

Algunas ediciones, como encabezados o pies de pagina de ancho completo, extension de menus o nuevos encabezados requiren que se identifique el contenedor tipo DIV donde se aloja, ademas de modificar sus atributos CSS.

Asi que para darles una idea aproximada de como esta construido internamente y los contenedores DIV donde se alojan las partes mas importantes, es que publico esta pequeña guia.

Primero, la imagen ilustrativa, cada contenedor DIV esta señalado por un marco de color agregado por el simple metodo de establecer un borde dentro de sus propiedades CSS (alojadas en la carpeta CSS en el archivo TEMPLATE.CSS de la plantilla generada con Artisteer)



Comezaremos a enumerar los DIV señalados con numeros rojos en circulos azules, cada numero marca un contenedor (imaginemos los contenedores como cajas dentro de otras cajas).

1 #art-main{}
Este contenedor engloba todo el sitio web, sin incluir las opciones del BODY (imagen de fondo o color de relleno). Sus atributos listados a continuacion determinan el tipo de font base para el sitio web, peso y tamaño
dijo: font-family:Tahoma, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;[/quote]

2) .art-sheet{}
Este contenedor limita el espacio donde se alojaran los elementos de la pag web, es el area normal de trabajo, cualquier elemento que deseemos se expanda mas alla de el ancho definido durante la creacion del template debe de quedar FUERA de este contenedor.
Antes de la instruccion: <div class="art-sheet"> en el archivo index.php
Sus atributos estipulan la posicion centrada esta estipulada gracias a la instruccion MARGIN, los valores estipulan un margen de 0 para el inicio y fin. Y AUTO para los margenes izquierdo y derecho, lo que logra en centrado horizontal
dijo: position: relative;
margin: 0 auto;
min-width: 33px;
min-height: 33px;[/quote]

3) div.art-header{}
Es el encabezado del sitio, dentro de este encabezado esta el titulo, la animacion flash (solo Artisteer 3), el logo y la imagen. Sus valores nos crean un espacio sin margenes que se ajustara al contenido. La instruccion width de 100% hace que se extienda a todo lo ancho determinado por art-sheet. La instruccion overflow:hidden; evita que un elemento se extienda mas alla del ancho y alto delimitados.
dijo: margin: 0 auto;
position: relative;
width: 100%;
height: 200px;
overflow: hidden;[/quote]

4) .art-layout-cell, .art-content-layout-row{}
Este contenedor separa y limita las columnas del area de contenido, asi como los elementos de componente principales, dentro de este DIV quedan incluidas la gran mayoria de las posiciones del template. su código es el siguiente:
dijo: background-color: Transparent;
vertical-align: top;
text-align: left;
margin:0 !important;
padding:0 !important;[/quote]


5) .art-block{}
Este contenedor encapsula la informacion cada modulo mostrado en las posiciones LEFT y RIGHT, es el marco externo de los modulos que se coloquen aqui. cada modulo de joomla en estas posiciones se vera afectado por el formato establecido en su codigo CSS.
dijo: position: relative;
margin: 0 auto;
min-width: 1px;
min-height: 1px;[/quote]

6) .art-footer{}
Es el ultimo contenedor dentro del contenido de la pag, aloja la informacion de feed, copyright y links alternos.
dijo: position: relative;
overflow: hidden;
width: 100%;[/quote]

El menú:
Este contenedor no esta llamado dentro de el archivo index.php, sino que es llamado a traves de la instruccion que carga la posicion USER3:

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

Se relaciona al contenedor .art-menu{} y dentro de el y sus contenedores derivados se especifican las caracteristicas visuales del MENU y submenus desplegables.

Espero que les sirva de guia para la edicion o expansion de templates de Artisteer. Es IMPORTANTE destacar que este no es una extensa explicacion del codigo CSS generado por ARTISTEER, es una guia introductoria a los principales contenedores que genera para en base a ello partir a mejorar o ampliar la presentacion visual de estos templates, dejo una muestra de un template editado gracias a colocar los elementos dentro o fuera de los predeterminador por el software.



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!!



Quedo a sus órdenes para cualquier duda.