Imagen lupa o boton buscar en menu horizontal [SOLUCIONADO]

[jaouto]

Buenas noches,

 

estoy trabajando con Prestashop 1.6 con la plantilla que viene por defecto.

 

Os envio una imagen de la pagina, ya que la tengo en modo mantenimiento, para que podais entender lo que quiero y ver si me podeis ayudar.

He activado la barra de busqueda en el menú horizontal y quería saber si se puede poner alguna imagen al lado tipo lupa o buscar para que sea un poco mas facil de ver.

 

Un saludo y gracias.

Edited October 10, 2014 by jaouto (see edit history)

[rafaelamargo]

Tienes varias opciones, una de ellas es modificar el fichero:

 

/themes/default-bootstrap/blocktopmenu/blocktopmenu.tpl

y despues de esto:

 

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

 

añadir esto:

 

<button type="submit" name="submit_search" class="btn btn-default button-search">

<span>{l s='Buscar' mod='blocktopmenu'}</span>

</button>

Y luego en el fichero:

 

/themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

Añadir esto:

 

#block_top_menu .btn.button-search {

    background: #333333;

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    border: none;

    color: white;

    width: 50px;

    text-align: center;

    padding: 10px 0 11px 0; }

    #block_top_menu .btn.button-search span {

      display: none; }

    #block_top_menu .btn.button-search:before {

      content: "\f002";

      display: block;

      font-family: "FontAwesome";

      font-size: 17px;

      width: 100%;

      text-align: center; }

    #block_top_menu .btn.button-search:hover {

      color: #6f6f6f; }

Esto que he pegado lo que he codigo del codigo css del boque de busqueda rapida, posiblemente tengas que hacer algun apaño para que se quede bien. (De esa manera con el  content: "\f002"; veras la lupa..)

 

Luego en el fichero:

 

/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

Busca esto:

 

.sf-menu li.sf-search input {

display: inline;

padding: 0 13px;

height: 30px;

line-height: 30px;

background: white;

margin: 13px 10px 0 0;

font-size: 13px;

color: #9c9b9b;

border: 1px solid #d6d4d4;

}

y modificar esa parte del css segun tus criterios para que quede bien

[jaouto]

Muchisimas gracias!! Lo doy por solucionado