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

Ariel Shinigami

Por la siguiente instrucción:

getCfg('sitename');?>

La segunda instrucción devuelve el nombre del sitio que esta contenido en el archivo configuration.php de la carpeta raiz del sitio web.Espero que este tutorial vuelva a serles de su agrado y de mucha utilidad!!!Quedo a sus órdenes para cualquier duda o aclaración.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!!Mi web: http://www.david-alvarez.com.mx/