Hoy nos centramos de nuevo en Prestashop 1.7, ya que esta última versión del famoso CMS tiene algunas detalles de diseño que no nos gustan demasiado, como es el caso del carrusel de imágenes o slider de la página principal. Como ya habéis notado no ocupa toda el ancho de pantalla, pues en este post os vamos a enseñar como conseguirlo.

Carrusel de Imágenes (Slider) a pantalla completa

Para hacer que nuestro slider ocupe todo el ancho de la pantalla tenemos que seguir unos sencillos pasos, sin necesidad de tocar código.

Lo primero es ir a la sección de Posiciones de los módulos, que se encuentra dentro de Diseño.

slider pantalla completa prestashop 1.7

Ahora clicamos en Subir un módulo en la esquina superior derecha y añadimos el módulo carrusel de imágenes en el hook displayNavFullWidth.

slider pantalla complate prestashop 1.7

Tras realizar este cambio el slider aparecerá en todas las páginas de nuestra tienda online, si queremos que esto no ocurra debemos volver a la sección de Posición de los módulos, buscar el hook displayNavFullWidth y clicar en modificar el módulo Carrusel de imágenes. El siguiente paso es dejar solo marcado la página index en excepciones.

Ya hemos con seguido tener el slider de nuestra home a pantalla completa en prestashop 1.7. Para rematar el asunto debemos eliminar el módulo carrusel de imágenes del hook displayHome para que no aparezca el slider original en la home.

El siguiente paso es conseguir que la imagen de nuestro slider tenga la altura que deseamos (por defecto es 340px).

Cambiar altura del slider en Prestashop 1.7

Os daremos varias opciones;

– Podríamos ir al archivo:

/themes/classic/assets/css/theme.css

y modificar directamente la línea:

.carousel .carousel-inner {
height: 340px;
}

– O añadir una nueva línea en el archivo;

/themes/classic/assets/css/custom.css

.carousel .carousel-inner {
height: nueva_alturapx;
}

En nueva_altura, definimos el número de pixeles que queremos definir para la altura del slider en Prestashop 1.7.

– O añadir una nueva línea en el archivo;

/themes/classic/assets/css/custom.css
.carousel .carousel-inner{
height:auto!important;
}

Si os fijáis bien queda una línea blanca poco estética debajo del slider, pues vamos a ver como elimarla.

Eliminar línea blanca debajo del slider en Prestashop 1.7

Para eliminarla debemos editar el archivo homeslider.css, que se encuentra en la ruta;

/modules/ps_imageslider/css/homeslider.css

Solo debemos eliminar;

margin-bottom: 50px;

o cambiarlo a;

margin-bottom: 0px;

Otra opción es añadir el siguiente código al archivo custom.css

/themes/classic/assets/css/custom.css

.carousel .carousel-inner{
height:auto!important;
margin-bottom: 0px!important;
}

Y si este sistema no os funciona os recomiendo leer estudiar los siguientes enlaces;

https://belvg.com/blog/custom-hooks-in-prestashop-1-7.html

https://belvg.com/blog/theme-yml-file-the-heart-of-prestashop-1-7.html

http://belvg.net/prestashop-themes/PS17-demo/


Hosting

1
Hola ¿podemos ayudarte?
Powered by