Cambiar tamaño del logo en Prestashop 1.7

Si en la pestaña Diseño -> Temas y logotipo, intentamos subir un logo, por ejemplo, del siguiente tamaño:

Elección del logo para Prestashop 1.7

Elección del logo para Prestashop 1.7

Subiendo logo en Prestashop 1.7

Vemos que reduce en exceso el tamaño del logo:

Logo muy pequeño en Prestashop 1.7

Logo muy pequeño en Prestashop 1.7

Una solución, es cambiar el tema de las rejillas (grid), vamos al fichero:

/themes/classic/templates/_partials/header.tpl

Y aquí:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

El valor “2” col-md lo vamos a variar.
(Para saber cómo funciona el tema de las rejillas, os invito a visitar esta guía: http://librosweb.es/libro/bootstrap_3/capitulo_2/tipos_de_rejillas.html )

En nuestro caso lo hemos cambiado a “6“.

Dejándolo así:

<div class="col-md-6 hidden-sm-down" id="_desktop_logo">

El problema ahora es que el logo se ve mejor, pero el menú horizontal y el buscador ha bajado de golpe y ya no está a la misma altura que el logo…..

El logo ha bajado el menú horizontal y el buscador en Prestashop 1.7

Para solucionar esto, nos vamos al mismo fichero, buscamos esta línea de código:

<div class="col-md-10 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Y vamos a cambiar el: “col-md-10” en nuestro caso por “col-md-6”, dejándolo así:

<div class="col-md-6 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Finalmente, veremos el bloque del logo, menú y buscador de la siguiente forma:

Logo normal en Prestashop 1.7

Logo normal en Prestashop 1.7

Pues si reducimos el navegador, vemos que se ve bien hasta cierto punto…

Logo pequeño en resolución pequeña en Prestashop 1.7

Logo pequeño en resolución pequeña en Prestashop 1.7

¿Cómo podemos hacer un apaño para que cuando la web en resolución mínima no quede mal el logo (en nuestro caso particular)?

Añadimos en nuestro caso en el fichero /themes/classic/assets/css/custom.css 

La siguiente instrucción:

@media (max-width: 767px) {
#header .header-nav .top-logo a img {
max-height: 200px;
}
#header .header-nav {
max-height: 225px;
}
}

La imagen del logo en el CSS (en el theme.css) tiene una altura máxima establecida de 50px nosotros se la cambiamos a 200px.

El bloque que engloba al logo y a los otros elementos cuando la resolución es menor tiene una altura máxima de 50px nosotros se la cambiamos a 225px.

Por supuesto estos cambios solo se aplican en el @media (max-width: 767px) que hemos indicado, aunque con un poco de ingenio podríamos hacerlo para distintas resoluciones con el @media, pero bueno eso ya lo dejo a vosotros.

Evidentemente ha sido un pasaje muy rápido, por lo que es posible que tengáis que hacer más cambios. (De todos modos, tener en cuenta que esto ha sido para Prestashop 1.7.1.1, por lo que quizás en futuras variantes de la 1.7.X.X sea diferente)

Por cierto, si vosotros usáis inspeccionar elemento u firebug, veréis que hace referencia al theme.css, pero para no tocar el css original, simplemente hacemos una sobreescritura de los valores que necesitamos en el fichero custom.css

Por cierto, ¿recordáis que también hicimos unas guías, por si queremos cambiar el logo de ubicación o si queremos eliminar el logo de la cabecera?

Ah se me olvidaba, recordar:

  1. Limpiar cache en la pestaña Parámetros Avanzados -> Rendimiento

    Limpiar cache en Prestashop 1.7

  2. Si los cambios del CSS no los ves, limpia la cache de tu navegador.

Documento construido bajo Prestashop 1.7.1.1

Print Friendly

Añadir ficheros CSS y JavaScript en Prestashop

En esta ocasión, vamos hablar de un aporte desarrollado por el usuario Tuni-Soft de la Comunidad de Prestashop, que nos permite cargar nuestros propios ficheros *.css y *.js para luego cargarlos tanto en la tienda como en el mismo panel de administración.

La instalación y subida del módulo, sin problemas, desde la pestaña módulos -> módulos

El módulo, no ofrece ninguna configuración adicional y funciona de la siguiente forma:

En el directorio del módulo:

/modules/medialoader/

No debemos fijar en las siguientes 4 carpetas:

Carpeta para cargar nuestros CSS Y JS en Prestashop mediante un módulo

  • css -> Aquí metemos los ficheros CSS que luego cargaran en la tienda
  • js -> Aquí metemos los ficheros JS que luego cargaran en la tienda
  • bo_css -> Aquí metemos los ficheros CSS que cargaran en el panel de administración de tu tienda
  • bo_js -> Aquí metemos los ficheros JS que cargaran en el panel de administración de tu tienda

A nivel de código el módulo simplemente se instala en dos “hooks” en el displayHeader (hook donde cargan JS y CSS en el front-office) y en el displayBackOfficeHeader (hook donde cargan los JS y CSS en el back-office (panel)) y luego dentro de la función de los hooks, lo que hace es buscar dentro de los directorios que hemos comentado anteriormente y hacer uso de la función addCSS (para añadir los CSS) y de la función addJSS (para añadir los JS). (Si tenéis interés revisar el fichero medialoader.php)

¿Dónde puedo descargar este aporte para poder cargar mis ficheros JS y CSS en Prestashop?

https://www.prestashop.com/forums/topic/386184-free-medialoader-module-load-your-js-and-css-files-easily/

Por cierto, ¿Recordáis que también podíamos usar contentbox para cargar nuestros ficheros JS y CSS en la sección “Load Files on HTML Header ?

Sigue leyendo

Print Friendly

Cambiar logo de ubicación en Prestashop 1.7

Vamos a cambiar el logo de ubicación (bajo la plantilla por defecto de Prestashop 1.7) y colocarlo encima del bloque de “Contacte con nosotros, carrito, etc..”

Logo en Prestashop 1.7 con la plantilla por defecto

Logo en Prestashop 1.7 con la plantilla por defecto

Por defecto, en Prestashop 1.7, vemos logo así:

¿Y si quisiéramos que el logo se viera de la siguiente forma?

Ubicación del logo cambiada en Prestashop 1.7

Ubicación del logo cambiada en Prestashop 1.7

Existen varias formas 🙂

Una de ellas es la siguiente,

El primero paso es -> Eliminar/ocultar el logo de Prestashop 1.7

El segundo paso es en el mismo fichero donde hemos ocultado el logo, que recordamos que es el fichero:

/themes/classic/templates/_partials/header.tpl

Justo debajo de:

<nav class="header-nav">

Añadimos el siguiente código:

<div class="container"><a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" />
</a></div>
Código logo Prestashop 1.7 cambio ubicación

Código logo Prestashop 1.7 cambio ubicación

Sigue leyendo

Print Friendly

Cambiar altura del slider en Prestashop 1.7

En la pestaña Módulos -> Módulos -> Módulos Instalados, si buscamos el módulo:

ps_imageslider / carrusel de imágenes

Vemos que no tenemos ninguna opción de configuración para ajustar la altura del contenedor del slider en Prestashop 1.7 (Al menos en Prestashop 1.7.1.0 con la versión 2.0 del módulo)

¿Dónde se configura la altura del contenedor del Slider en Prestashop 1.7?

¿Dónde se configura la altura del contenedor del Slider en Prestashop 1.7?

Desde firebug / inspeccionar elemento, vemos que es debido a que la instrucción:

Altura del Slider en Prestashop 1.7

Altura del Slider en Prestashop 1.7

.carousel .carousel-inner tiene limitada el “height” (altura) a 340px;

Podríamos ir directamente al fichero:

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

Y aunque podríamos modificar directamente la línea:

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

Lo que vamos hacer es añadir una nueva línea en el fichero en el fichero:

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

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

CSS personalizado en Prestashop 1.7

CSS personalizado en Prestashop 1.7

En nueva_altura, definimos el numero de pixeles que nosotros queremos definir para la altura del slider en Prestashop 1.7

 

Print Friendly

¿No se ven las subcategorías en los listado de las categorías en Prestashop 1.7?

Más que una pregunta, era una afirmación pero siendo un poco original, prefiero colocar un titular amarillista…

Lo dicho, en Prestashop 1.7, no se ven las subcategorías cuando pinchas en una categoría.

¿Por qué?

Sencillo, no está implementada esa función a día de hoy en Prestashop 1.7.0.3

Muestro imágenes, para que veáis a lo que me refiero:

Al principio creía que era como pasaba en Prestashop 1.6, que no estaba chequeada en el “Configurador de temas” la opción: “Mostrar subcategorías”

Mostrar subcategorías en Prestashop 1.6

Mostrar subcategorías en Prestashop 1.6

Pero no…..

El problema viene debido a que en Prestashop 1.7.0.3, no tiene implementada esta función…

Tenemos varias soluciones por la Comunidad de Prestashop, en esta ocasión, vamos a obtener la solución que nos proporciona el usuario “nemo“.

Nos propone lo siguientes cambios:

1 – Modificar fichero TPL

Editamos el fichero:

/themes/classic/templates/catalog/listing/category.tpl

Donde tenemos el siguiente código:

Código Category.tpl en Prestashop 1.7

Código Category.tpl en Prestashop 1.7

Sigue leyendo

Print Friendly

Guía – Mostrar marcas en grid (cuadrícula) en Prestashop 1.5

fabricantess

La guía esta basada en Prestashop 1.5.5.0 con la plantilla por defecto.

Los ficheros, que vamos a editar son los siguientes:

/themes/default/css/global.css

/themes/default/manufacturer-list.tpl

Vamos a empezar, con el fichero:

/themes/default/manufacturer-list.tpl

Sigue leyendo

Print Friendly

Guía – Cambiar el fondo verde de “disponibilidad” en la ficha del producto en Prestashop 1.5

En esta guía, explicaremos como cambiar el “fondo verde” de disponibilidad en la ficha del producto en Prestashop 1.5.

fdiaplo

Cambiar fondo “disponibilidad” en la ficha del producto en Prestashop 1.5

En principio sera suficiente con tocar el ficheroproduct.css” de la plantilla en Prestashop 1.5.

En el fichero en cuestión: (Como normalmente hacemos, recordamos que estamos trabajando bajo la plantilla por defecto de Prestashop 1.5) Sigue leyendo

Print Friendly

Guía – Eliminar la descripción corta del producto en la ficha del producto en Prestashop 1.5

En esta guía, explicaremos como eliminar la descripción corta de la ficha del producto en Prestashop 1.5.

Recordamos que estamos trabajando bajo la plantilla por defecto de Prestashop 1.5, en este caso particular estamos trabajando con Prestashop 1.5.3.1.

fproducto

Eliminas descripción corta en la ficha del producto en Prestashop 1.5

Podemos por ejemplo “ocultarla” con el css.

Para ocultarlo con la descripción corta del producto en la ficha del producto en Prestashop 1.5 con css, podemos ir al fichero:

/themes/default/css/product.css

Buscar la siguiente linea:

#pb-left-column #short_description_block {
color:#666;
}

Y dejarlo así: Sigue leyendo

Print Friendly

Guía – Ocultar la columna derecha en la página principal de Prestashop 1.5

En esta guía, explicaremos como ocultar la columna derecha de tu tienda principal en la página principal bajo Prestashop 1.5.

ocultarcolumnaDerecha

Ocultar la columna derecha en la página principal en Prestashop 1.5

El primero paso sera ocultar dicha columna “solo en la página principal” de tu tienda Prestashop, para ello editamos el fichero:

/themes/default/css/global.css (Estamos trabajando con la plantilla por defecto de Prestashop 1.5)

Dentro de dicho fichero añadimos la siguiente linea: Sigue leyendo

Print Friendly

Guía – Ocultar la columna izquierda en la ficha del producto en Prestashop 1.5

En esta guía, vamos a ocultar la columna izquierda en Prestashop 1.5 bajo la plantilla por defecto en la ficha del producto.

pdefecto

Ocultar la columna izquierda en Prestashop

Vamos a seguir 3 pasos, para ocultar el lateral “Izquierdo” en Prestashop 1.5 y adaptar la columna central y la ficha del producto al “nuevo ancho”.

El primero paso es ir al fichero:

/themes/default/css/global.css

Y añadir esto:

#product #left_column {
display: none;
}

Con esto ya no veremos la “columna izquierda” en Prestashop 1.5, pero veremos que “Necesitamos aumentar la columna central” para cuadrar la página.

faltaancho

Necesitamos ampliar el ancho de la columna central en Prestashop 1.5

Sigue leyendo

Print Friendly