Añadir Efectos Hover en tu Plantilla

tiendasprestashop

Aprendiz de Prestashop
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.

Hover.css v2

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)

Insertar CODE, HTML o PHP:
theme/mi_plantilla/
Ahora nos vamos a la carpeta raíz de nuestra plantilla y abrimos nuestro header.tpl

Insertar CODE, HTML o PHP:
theme/mi_plantilla/header.tpl
Copiamos esto

Insertar CODE, HTML o PHP:
<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
 

Josraso

Lo cortes no quita lo valiente.
Miembro del equipo
Divertidos y bonitos efectos y tal como dices con un poco de imaginacion se pueden hacer cosas expectaculares.

Gracias por el aporte.
 

Plumeire

Aprendiz de Prestashop
Qué chulos! Muchas gracias, hay gente enorme en este foro (L)
 
Arriba