Este sitio usa cookies, propias y de terceros.
Si se continúa con nosotros entendemos que se acepta el uso de cookies.

Añadir Efectos Hover en tu Plantilla

Tema en 'Diseño web en Prestashop' iniciado por tiendasprestashop, 11 Feb 2015.

  1. tiendasprestashop

    tiendasprestashop Aprendiz de Prestashop

    9
    0
    0
    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.

    [​IMG]
    [​IMG]
    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
     
  2. Josraso

    Josraso Lo cortes no quita lo valiente. Miembro del equipo

    508
    24
    18
    Divertidos y bonitos efectos y tal como dices con un poco de imaginacion se pueden hacer cosas expectaculares.

    Gracias por el aporte.
     
  3. Plumeire

    Plumeire Aprendiz de Prestashop

    13
    0
    1
    Qué chulos! Muchas gracias, hay gente enorme en este foro (L)
     

Compartir esta página