En este post, quiero enseñaros como aplicar efectos hover ha vuestras plantillas prestashop, algo fácil y rápido y que seguro despertara la imaginación de muchos de vosotros.
Aquí tienes el ejemplo de los efectos que vamos a poder aplicar a todas las partes de nuestra web.
Lo primero que necesitamos es descargar el paquete Hover del proyecto en Github.
Una vez lo tenemos descargado, vamos a descomprimirlo en la carpeta de nuestro theme. (ojo, yo le he cambiado el nombre a la carpeta y ahora se llama hover)
theme/mi_plantilla/
Ahora nos vamos a la carpeta raíz de nuestra plantilla y abrimos nuestro header.tpl
theme/mi_plantilla/header.tpl
Copiamos esto
<link rel="stylesheet" href="/themes/default-bootstrap/hover/css/hover.css" type="text/css" />
Y lo pegamos entre las etiquetas <head> y </head> de nuestro header.tpl
Si lo todo ha ido bien, solo tenemos que abrir nuestra pagina web y añadir la ruta de la carpera. /themes/default-bootstrap/hover/index.html
En nuestro caso, como hemos instalado prestashop dentro de la carpeta demos, la ruta correcta seria la siguiente:
http://tiendasprestashop.es/demos/themes/default-bootstrap/hover/index.html
Como aplicarlo a tu plantilla
Para aplicar los efectos a nuestra plantilla tendras que modificar los archivos .tpl
En este vídeo, te enseñamos como aplicar y cambiar los efectos hover de la plantilla default-boostrap-hover, con el inspector de elementos en el navegador Google Chrome.
http://youtu.be/O6LCl_s45mY?list=UU_uc7LE6biZvFZbQkMhRi7g
Espero que les guste
“Algunas personas sueñan con hacer grandes cosas, mientras otras están despiertas y las hacen”.
Divertidos y bonitos efectos y tal como dices con un poco de imaginacion se pueden hacer cosas expectaculares.
Gracias por el aporte.
Qué chulos! Muchas gracias, hay gente enorme en este foro (L)
Lo que sabemos es una gota de agua; lo que ignoramos es el océano!!