En este artículo veremos una manera práctica de agregar iconos a los items de menú de la plantilla.1- Generalidades
Trabajaremos con el template yourshop de la empresa gavick , pero en realidad la lógica puede aplicarse para cualquier template que tenga un menú superior o lateral.
Inicialmente nuestro menú de template lucirá como se aprecia en la siguiente imagen
2- Buscando el archivo .js
Necesitamos localizar un archivo javascript del template, que se cargue en todas las páginas, para agregar nuestro código. Ubicamos el archivo /templates/gk_yourshop/js/domready_fix.js
En caso de no existir un archivo javascript, será necesario hacer una referencia desde el template a un archivo nuevo.
3- Copiando las imágenes y el código adicional
Primero necesitamos copiar las imágenes en alguna ruta de nuestro sitio web, para este ejemplo utilizaremos la siguiente ruta /images/stories/
Luego agregamos el siguiente código a nuestro archivo javascript localizado anteriormente.
Tener en cuenta que para este ejemplo los ids de menú localizados son #menu70 y #menu1, si se tratase de una clase sería .menu70 y .menu71, etc.
window.addEvent('domready',function(){
ponerIconoMenu("#menu70",'/images/stories/heart_32.png');
ponerIconoMenu("#menu1",'/images/stories/home_32.png');
});
function ponerIconoMenu(id, rutaicono){
var img = new Element('img',{'src':rutaicono, 'style':'margin-top:5px;'});
img.injectTop($(id + ' span span')[0]);
}
4- Resultado Final
Finalmente obtenemos los íconos en los items de menú, tal como se aprecia en la siguiente imagen:
En el siguiente video se explica cómo agregar los íconos al menú de un template siguiendo los pasos anteriormente descritos:
