Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Viernes, 22 Julio 2011 20:10

Nuevo color en template JA Zeolite

Escrito por 
CMS:  Joomla! |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


colorzeoliteEn el siguiente artículo veremos cómo agregar un nuevo color a los colores que tiene por defecto la plantilla de Ja Zeolite.

La plantilla de Ja Zeolite es una de las plantillas más populares, especial para tienda ya que trabaja integrada con virtuemart.

 

 

1- Cambiando el archivo xml

En el archivo /templates/ja_zeolite/templateDetails.xml , necesitamos agregar un nuevo color, en la línea 89 aproximadamente agregamos lo siguiente:

<option value="naranja">Naranja</option>

Es decir el color de ejemplo naranja, el código completo de la sección de colores del archivo xml se muestra en la siguiente imagen:

img1

 

2- Cambiando las imágenes del template

En la carpeta /templates/ja_zeolite/images/ , creamos una nueva carpeta con el nombre del color y subimos las imágenes previamente modificadas al color naranja.

Para realizar este trabajo nos basamos en las imágenes de una carpeta de color por defecto y utilizamos algún editor de imágenes (ver video al final del artículo).

 

3- Copiando el archivo de estilos

En la carpeta /templates/ja_zeolite/css/colors/ nos basamos en algún archivo de color y lo copiamos con el nombre naranja.css

img2

 

4- Modificando el archivo de estilos

Realizamos las modificaciones al archivo de estilos naranja.css, cambiando las rutas de las imágenes y cambiando los colores por los tonos de colores naranja. Para realizar este trabajo podemos usar algún editor que nos permita buscar y reemplazar texto rápidamente.

 

5- Seleccionamos el nuevo estilo 

Desde el gestor de plantillas ingresamos a la configuración de la plantilla ja_zeolite y seleccionamos el nuevo estilo definido.

img3

 

6- Resultado Final

imgfinal

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 

En el siguiente video se explica cómo editar las imágenes del template

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop




Plugin Optimización de Imágenes Gratuito para WordPress