Como cambiar el ancho de la barra busqueda PrestaShop

No se que espera prestashop de nuestros (hipoteticos) clientes, creen que van a escribir su vida en prosa para encontrar un producto en nuestra tienda, por eso habran puesto de forma de predeterminada un cuadro de busqueda que ocupa el 50% del header, de unos 300px de ancho.

Menos mal que no es tan cerrado en lo que a CSS (estilos, colores y demas cosas que van menos sobre el funcionamiento y mas sobre el diseño) se refiere.

Para cambiar el ancho de el cuadro de busquedas del header, solo tenemos que abrir el FTP o el Gestor de Archivos para modificar el archivo blocksearch.css que esta en:

/modules/blocksearch/

Tendremos que buscar este texto:

#search_block_top #search_query_top {

Y nos tendra que salir un codigo como este:

#search_block_top p {padding:0;}
#search_block_top #search_query_top {
    padding:0 5px;
    height:23px;
    width: 300px;/* 310 */
    border:1px solid #666;
    border-right: 0 !important;
    color:#666;
    background:url(img/bg_search_input.png) repeat-x 0 0 #fff;
    float: left;
}

Como veis, he marcado en Naranja el codigo que cambiaremos para hacerlo mas pequeño (o mas grande, para gustos colores).

Lo pondremos por ejemplo, a 120px, que es un tamaño mas que aceptable para cualquier comprador medio. Hecho esto, guardamos con un codigo que debe haber quedado como esto:

#search_block_top p {padding:0;}
#search_block_top #search_query_top {
    padding:0 5px;
    height:23px;
    width: 120px;/* 310 */
    border:1px solid #666;
    border-right: 0 !important;
    color:#666;
    background:url(img/bg_search_input.png) repeat-x 0 0 #fff;
    float: left;
}

Y ala, a disfrutar de un logo mas grande una barra de busqueda con mas sentido comun.

Categories: PrestaShop