Posteamelo

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:item->catid;?>Es importante que quede encapsulada dentro de las instrucciones 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

la cúal sustituiremos por la siguiente:dijo: "; elseif ($category == 3) echo "

"; else echo "

";?>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

la cual sustituiremos con:dijo: "; elseif ($category == 3) echo "

"; else echo "

";?>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.

Articulos en colores por categoria (Joomla + Artisteer)

"; else echo "

Dejá tu comentario

Autor del Post