RasAlGhul

En este tutorial adaptaremos una plantilla HTML para usarla en nuestros proyectos Joomla 2.5. A veces nos piden que hagamos una adaptación a Joomla desde el archivo original de un diseñador (PSD o HTML ) y convertirlo a la platilla dinamica de Joomla 2.5. Eso no es tan difícil como parece, la idea es incluir en el codigo HTML los elementos de PHP que muestran los módulos de joomla . No hablare aquí de maquetacion CSS, muchos tutoriales ya hablan acerca de ello. Aprenderemos a: Identificar las posiciones. Anexar los archivos necesarios. Agregar las posiciones. Configurar la vista de los módulos. Tutorial completo en: http://www.david-alvarez.com.mx/

Hola, el tutorial que haremos ahora es como pasar una plantilla a PSD a HTML, que como todos sabemos es la base para la imagen de cualquier pagina en la web. Comenzaremos con una plantilla web creada en Photoshop y que estará en archivo PSD. Necesitaremos: 1 Plantilla web en PSD Editor de imagenes (Adobe Photoshop) Editor de HTML y CSS (Dreamweaver o Notepad++) Tiempo Esta es la primera entrega donde hablaremos de los requerimientos básicos para la adaptación de un template, desde la idea original en con el archivo generado en photoshop, hasta su ultima adaptación a joomla (nos tome los tutoriales que nos tome) Nuevamente el tutorial completo lo pueden encontrar en mi pagina web http://www.david-alvarez.com.mx En la sección: DISEÑO WEB / TUTORIALES / HTML y CSS

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.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/

En algunos templates profesionales de Joomla, como los elaborados por ROCKETHEME o JOOMLART tienen instrucciones que permiten establecer encabezados o colores diferentes de acuerdo a las condiciones o a sufijos de clases o modulos.En los templates elaborados con Artisteer, el formato gráfico de los articulos esta determinado completamente por el template, por lo que siempre tendremos el mismo color de fondo o el mismo encabezado en todos los articulos.El objetivo de este tutorial es editar el template elaborado con Artisteer y lograr que mediante instrucciones condicionales el fondo y el encabezado del articulo cambie de acuerdo a la CATEGORIA a la que pertenezca.En un post anterior, explique como esta armado el template de Artisteer y en donde se ubica cada elemento del contenido (Ver más), este tutorial ampliara el conocimiento interno del template de artisteer.Necesitaremos:1.- Un template de Artisteer, cualquiera, yo uso actualmente los elaborados con la version 3.0.0.329062.- Un editor de imagenes.3.- Un editor de html/css/php4.- PacienciaUna de las primeras cosas que debemos hacer es determinar a que categoria pertenecen nuestros articulos, Joomla crea las categorias en orden numerico ascendente, en el orden en que las ingresemos, por lo cual siempre tendremos un ID de categoria diferente.En este caso las categorias activas estan numeradas como 1 y 3.Paso No 1: Revisamos la estructura del template.En anteriores post hemos editado en su mayor parte el contenido de la carpeta CSS y del archivo INDEX.PHP, sin embargo ahora editaremos elementos de la carpeta HTML, en esta carpeta se encuentran archivos PHP que controlan la visión de los contenidos de Joomla, sobre todo aquellos en los que Artisteer agrega una estructura muy especifica.En la subcarpeta CONTENT existen 4 subcarpetas que contienen los archivos relacionados con la estructura de los articulos (ARTICLE) y de los blogs del sitio (CATEGORY, FRONTPAGE y SECTION). En esta ocación editaremos los archivos de esta sección.dijo:No explicare detalladamente la estructura CSS dado que seria muy largo, cualquier duda en el css usado remitanse a algun tutorial de la webPaso No 2: Editando el archivo DEFAULT_ITEM.PHPEn a carpeta FRONTPAGE encontraremos dos archivos default.php y default_item.php, el primero controla la estructura del blog en la pagina principal, columnas y contenidos. El segundo es el que nos interesa dado que contiene la estructura del articulo a mostrar dentro del blog (cada articulo cuyo preview vemos en el blog asi como del boton "Leer mas"Primero obtendremos el ID de la categoria con una sencilla instruccion$category= $this->item->catid;La cual colocaremos en la linea 7 del template, despues de la intruccion endif; quedando de la siguiente forma.dijo:<?php endif;$category= $this->item->catid;?>Es importante que quede encapsulada dentro de las instrucciones <?php ?> dado que la instruccion de no estar dentro de esa declaración, no sera interpretada y puede originar un error.Paso No 3: agregando condiciones de formato para el fondo.Estas instrucciones son PHP combinado con declaraciones css, por lo que hay que tener mucho cuidado con el orden, un error en la escritura de la declaración haria que la pagina no funcionara.Buscaremos la siguiente instrucción <div class="art-post-body"> la cúal sustituiremos por la siguiente:dijo: <?php if ($category == 1) echo "<div class="art-post-body" style=background-color:#f5f5b4;border:#f1e69c3pxsolid;border-radius:10px>"; elseif ($category == 3) echo "<div class="art-post-body" style=background-color:#b9c8cb;border:#8aa3a83pxsolid;border-radius:10px>"; else echo "<div class="art-post-body">";?>El codigo hace lo siguiente:Evalua el valor de CATEGORY, y establece atributos para la clase art-post-body dependiendo del valor de category. En este caso pusimos condiciones para los valores de ID 1 y 3, cada valor de ID diferente que quisieramos dar un formato especifico generaria una nueva linea de instruccion elseif ($category == #) con su subsecuente instruccion de formato CSS echo <div class=..."Paso No 4: agregando condiciones de formato para encabezado.Dentro del mismo archivo buscaremos la instruccion <h2 class="art-postheader"> la cual sustituiremos con:dijo: <?php if ($category == 1) echo "<h2 class="art-postheader" style=width:100%;margin:5px-13px5px-13px!important;background-repeat:no-repeat;background-position:lefttop;padding-left:14px;padding-right:12px;padding-bottom:23px;overflow:visible;background-image:url('templates/Onarres_01-a/images/corner1.png');>"; elseif ($category == 3) echo "<h2 class="art-postheader" style=width:100%;margin:5px-13px5px-13px!important;background-repeat:no-repeat;background-position:lefttop;padding-left:14px;padding-right:12px;padding-bottom:23px;overflow:visible;background-image:url('templates/Onarres_01-a/images/corner2.png');>"; else echo "<h2 class="art-postheader">";?>Esta instrucción es mas larga dado que establece nuevos margenes para el encabezado, ademas de poner una imagén de fondo que previamente habremos editado, es importante destacar que esta imagen mide mas de 1000px de ancho, dado que queremos que sirva para cualquier ancho a mostrar dentro del blog. Asi debera de lucir el blog despues de la edición.Algunas observaciones:1.- Cuando se declara una linea de css mediante un llamado ECHO de php, las " llevan un antes de ellas, o php lo confundira con una instruccion propia de php y no como un texto.2.- En la declaracion de las imagenes, estoy declarando la ruta absoluta de la imagen, debido a que no encontre la manera de poner la relativa, debe de poderse, pero ya estaba algo cansado 3.- Esta edición puede hacerse tambien para los archivos correspondientes en la carpeta ARTICLE, CATEGORY y SECTION, sustituyendo las mismas instrucciones de la misma manera en los archivos correspondientes:dijo:ARTICLE = default.phpCATEGORY = blog_item.phpSECTION = blog_item4.- En la edicion del archivo default.php dentro de la carpeta ARTICLE la instrucción que obtiene el valor ID de la categoria es $category= $this->article->catid; es el unico archivo donde este valor cambia.Eso seria todo, espero que les sirva de mucho y que mejore sus templates en Artisteer.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/Quedo a sus órdenes para cualquier duda.

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"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 superiorHEADER = Contiene el nombre de la pagina, y el subtitulo o slogan, además de la imagen de headerBANNER1 = 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 bannerUSER4 y 5 = Dos posiciones de usuario mas (50%)BANNER5 = Ultima posicián de banner en el cuerpo centralRIGHT = 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 CopyrightPara 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 pluginModulo de ROTATOR: Lof ArticlesSlideShow moduleModulo de FLASHNEWS: Rok-NewsflashEsto 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!!Mi web: http://www.david-alvarez.com.mx/Quedo a sus órdenes para cualquier duda.Mi nuevo post: Ancho de pagina-columnas dinamico (Joomla 1.5 - Artisteer 2)

Pues bien, el proyecto de hoy nos separara completamente la pagina de inicio del resto del diseño de nuestro template con Artisteer, permitiendonos inclusive elegir diferentes caracteristicas en la portada.Podrian decir que esto se hace fácilmente con la asignación de menú, lo cual es completamente cierto, con eso y algunas ligeras modificaciones del template (o dos templates iguales con excepción de una edicion del encabezado se podria lograr algo como este ejemplo) Este es un poco del estilo que maneja GavickPro en su template Coolfoto.Asi que entonces queremos que este separado de esta manera.Asi que sin más preambulo, esto es lo que necesitaremos.1.- Un template de Joomla creado con Artisteer (yo estoy usando ahora la version 3.0.0.32906)2.- Un editor de html/css/php3.- Un servidor web local.4.- Paciencia.Este es nuestro template original.Paso No 1: Editando el CSS.Abriemos nuestro archivo TEMPLATE.CSS ubicado en la carpeta CSS del template de Artisteer, crearemos dos contenedores DIV agregando el siguiente codigoEl primero es el PORTCONTENEDOR, este contenedor no ocupara TODO el espacio de la pantalla y se vera completo sobre el fondo de nuestro Template#portcontenedor{ position:absolute;height:100%;width:100%;margin: auto;background-image: url('../images/fondo.jpg') !important;background-repeat:repeat;}Después el contenedor del contenido de la portada, este esta preparado para alinearse tanto vertical, como horizontalmente, con una medida de 440x1000 px, la cual puede ser ajustada de acuerdo a los requerimientos de nuestro diseño.#portcontent{top: 50%; left: 50%;margin-top: -220px; margin-left: -500px;height:440px; width: 1000px;position:absolute;border:#060 5px double;background-color:#FFF;}Este codigo nos creara un contenedor y una fondo separados para nuestra portada.Paso No 2: Editamos archivo TEMPLATEDETAILS.XLM.Aquí simplemente agregaremos la posicion PORTADA en nuestra lista de posiciones, la cual se insertara en la lista <positions>con el formato <position>portada</position>Este paso ya lo hemos explicado en un tutorial anterior.Paso No. 3: Editamos archivo INDEX.PHPAqui es donde haremos todo el truco, en mi anterior post comente la estructura del template de Artisteer, y la manera en que se encapsulan los contenedores DIV que lo conforman, la idea es excluir a todos los elementos del diseño si la posicion PORTADA esta ocupada.Iremos a la linea que esta INMEDIATAMENTE debajo de la instrucción <BODY>, e insertaremos este código.<?php if (artxCountModules($document, 'portada') > 0): ?>El cual evaluara cuantos modulos estan publicados en la posicion PORTADA y en caso de ser mayores a 0, se activara esta seccionLa cerraremos con la instrucción <?php endif; ?>Inmediatamente despues de esta instruccion insertaremos una nueva condicion<?php if (artxCountModules($document, 'portada') == 0): ?>La cual nos activara todas las demás opciones cuando la posición PORTADA no esta ocupada. Esta instricción la cerraremos hasta abajo del archivo, justamente inmediatamente antes de la instruccion </BODY> con un nuevo <?php endif; ?>Aqui ya esta hecho el truco, si cualquier contenido es asignado a la posicion PORTADA inmediatamente excluira todo el resto del contenido de la pagina.Ahora justo despues de la instruccion <?php if (artxCountModules($document, 'portada') > 0): ?> insertaremos nuestras declaraciones de los contenedores DIV que le dan el aspecto gráfico a la portada e incluiremos el codigo que mostrara el contenido de la posicion PORTADA, con el siguiente código.<div id="portada"> <div id="portcontenedor"> <div id="portcontent"><jdoc:include type="modules" name="portada" style=artstyle artstyle=art-block /> </div></div></div> <div class="clr"></div>Ahora, solo nos restara asignar un contenido a la posicion PORTADA y hacer la correcta asignacion del menu a la pagina de INICIO (esta configuración dependera de la estructura de su sitio web).Obviamente dentro del contenedor de la portada se pueden anidar tantos contenedores DIV como sean necesarios a nuestro diseño y tantas posiciones como se requieran. Estas instrucciones son de hecho la base de los modulos autocolapsables que tanto se usan en el diseño de un template de Joomla.Espero que el tutorial les sea de utilidad. Quedo a sus órdenes para cualquier duda.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/

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 agregar posiciones al template, 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ñodijo: font-family:Tahoma, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 12px;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.phpSus 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 horizontaldijo: position: relative; margin: 0 auto; min-width: 33px; min-height: 33px;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;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;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;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%;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!!Mi web: http://www.david-alvarez.com.mx/Quedo a sus órdenes para cualquier duda.

Este post esta creado para mostrar los pasos básicos para adaptar un template html a joomla 2.5, ya lo había publicado antes, pero había ya demasiados entradas a mi pagina y consumían mi tasa de transferencia mensual. Veremos desde la identificación básica de posiciones necesarias hasta la inserción de los módulos en tales posiciones a partir de un template simple, los archivos necesarios y las declaraciones básicas de configuración. Es el método que he usado en varias ocaciones, la más reciente la hice con un template para J! 2.5.9. El tutorial completo pueden encontrarlo en mi pagina personal: http://www.david-alvarez.com.mx Dentro de la sección: DISEÑO WEB / TUTORIALES Espero les sea de utilidad.

Aquí les paso una pequeña muestra del trabajo de Cosplayers Mexicanos. En todos los casos yo he tomado las fotografías, espero les sea de su agrado. Todas las fotos fueron tomadas por mi, a diferentes personas que me concedieron. Su tiempo y su talento. [NOTA: Cualquier comentario fuera de tono, será eliminado] BLACK CAT - SPIDERMAN ADA WONG - RESIDENT EVIL 6 PANTY & STOCKING JOKER & POISON IVY - STEAMPUNK HARLEY QUEEN - STEAMPUNK SABER NERO - FATE STAY NIGHT EXTRA ADA WONG - RESIDENT EVIL 6 LEN KAGAMINE - VOCALOID AQUA - KH BIRD BY SLEEP PANTY POLICE KITANA - MORTAL COMBAT Para mas sesiones de foto de cosplay tomadas por mi en colaboración con diferentes modelos. Pueden seguirme en FACEBOOK .