Jump to content

Centrar logo y poner buscador a la izq, y carrito derecha

quimfrcr

By quimfrcr
in Discusión general

 Share

Recommended Posts

quimfrcr Newbie

quimfrcr

Posted
Posted

Buenos días!! He estado buscando en los últimos hilos que se habla sobre centrar el logo, pero las soluciones que veo de tocar el global.css no encuentro donde dicen que hay que modificar, como si fuera diferente ahora. Por eso a ver si alguien me puede echar una mano.

 

 

La verdad es que hace un tiempo estuve toqueteando y lo vi donde se hacía, pero ahora no hay manera.

 

Quiero dejar el logo centrado y al lado izquierdo el buscador y a la derecha el carrito, que creo que es como quedara mejor. Pensaba que en posición de módulos se podía hacer.. pero no lo veo.

 

 

Gracias!

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Edita fichero:
 

/themes/plantilla/header.tpl

Busca esto:
 

<div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

Y dejalo asi:
 

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

{* <div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div> *}

Despues edita el fichero:
 

/themes/plantilla/modules/blocksearch/blocksearch-top.tpl

Y despues de esto:
 

<!-- /Block search module TOP -->

(Es decir al final)
 
Añade esto:

 

<div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
Link to comment
Share on other sites
quimfrcr Newbie

quimfrcr

Posted
  • Author
Posted

Por si acaso y no cargarme algo, en esa linea me falta una cosa que a ti te sale.

 

Yo tengo esto:

 

 

<div id="header_logo">

<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted (edited)

Por si acaso y no cargarme algo, en esa linea me falta una cosa que a ti te sale.

 

Yo tengo esto:

En tu header.tpl, tendras algo parecido a esto, (Es decir es el <div id="header_logo">..... </div> y su contenido lo que comentas)

 <div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>

Yo comento esto:

{*  <div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div> *}

para que no se ejecute el codigo, y luego en el fichero:

/themes/plantilla/modules/blocksearch/blocksearch-top.tpl

que es el fichero del buscador de la cabecera, pongo el codigo: (en mi caso ese era el del <div id="header_logo">...</div> (en tu caso si es un poco diferente pues pegas el tuyo)

<div id="header_logo">
									<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>

al final del fichero, es decir justo antes del:

<!-- /Block search module TOP -->

o justo despues...

Edited by nadie (see edit history)
  • Like 1
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Vale solo quería asegurarme, porque en la primera linea tu tienes:

 

<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}

 

y yo:

 

<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">

 

Si, lo tengo así, porque en la versión de github (que es de donde he copiado el codigo) viene asi implementado en la actualidad, habran ido  corrigiendo código para determinadas cosas (en este caso parece algo  relaccionado el enlace del logo en modo https, pero bueno, que eso ahora mismo no importa para que puedas moverlo o no..)

 

Si te sientes un poco inseguro al modificar el fichero, pues guardate antes una copia de los dos ficheros a modificar, y así si pasa cualquier cosa, pues restauras esos dos ficheros.

  • Like 1
Link to comment
Share on other sites
quimfrcr Newbie

quimfrcr

Posted
  • Author
Posted

Si, lo tengo así, porque en la versión de github (que es de donde he copiado el codigo) viene asi implementado en la actualidad, habran ido  corrigiendo código para determinadas cosas (en este caso parece algo  relaccionado el enlace del logo en modo https, pero bueno, que eso ahora mismo no importa para que puedas moverlo o no..)

 

Si te sientes un poco inseguro al modificar el fichero, pues guardate antes una copia de los dos ficheros a modificar, y así si pasa cualquier cosa, pues restauras esos dos ficheros.

 

También tienes razón.

 

Lo que pasa es que veo que no tengo el fichero : /themes/plantilla/modules/blocksearch/blocksearch-top.tpl

 

El mio es blocksearch.tpl a secas y al final de todo no pone :

 

<!-- /Block search module TOP -->

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

También tienes razón.

 

Lo que pasa es que veo que no tengo el fichero : /themes/plantilla/modules/blocksearch/blocksearch-top.tpl

 

El mio es blocksearch.tpl a secas y al final de todo no pone :

 

<!-- /Block search module TOP -->

 

Si no tienes el fichero:

/themes/plantilla/modules/blocksearch/blocksearch-top.tpl

en tu plantilla, copia el fichero:

/modules/blocksearch/blocksearch-top.tpl

(que ese si lo tienes) en tu directorio:

/themes/plantilla/modules/blocksearch/

y edita este ultimo...

 

¿Qué plantilla usas? (Por simple curiosidad)

  • Like 1
Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted

Restaura ambos ficheros, algo has modificado o comido de mas accidentalmente si se ha deformado la tienda... (Porque deformar, en todo caso la cabecera, pero la tienda entera por modificar lo que dice Nadie, no se tendria que de formar)

 

Yo he modificado lo que dice Nadie ahora en la plantilla por defecto y en la default ha quedado bien, en tu caso es posible que haya que realizar algunos ajustes, pero de ahí a que se deforme toda la tienda.... es un mundo..

Link to comment
Share on other sites
quimfrcr Newbie

quimfrcr

Posted
  • Author
Posted

Perdón! Encontre el archivo blocksearh_top.tpl en su sitio.. antes lo mire mal.

 

Y pone esto :

 

 

<!-- Block search module TOP -->



<div id="search_block_top" class="col-sm-4 clearfix">
    <form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" >
        <input type="hidden" name="controller" value="search" />
        <input type="hidden" name="orderby" value="position" />
        <input type="hidden" name="orderway" value="desc" />
        <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
        <button type="submit" name="submit_search" class="btn btn-default button-search">
            <span>{l s='Search' mod='blocksearch'}</span>
        </button>
    </form>
</div>
<!-- /Block search module TOP -->
Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted (edited)

Colocando eso me ha puesto 2 logos en la página.

 

Estoy intentando restaurar todo lo que he tocado. Pero algo pasa que no vuelve a la normalidad.

 

Solo he tocado el header.tpl y el blocksearch_top.tpl

En el header.tpl comentas el codigo del logo para que no se vea tal como te dijo Nadie, y en el blocksearch_top.tpl pegas el codigo del logo al final. 

Edited by galindogadea (see edit history)
Link to comment
Share on other sites
quimfrcr Newbie

quimfrcr

Posted
  • Author
Posted

En el header.tpl comentas el codigo del logo para que no se vea tal como te dijo Nadie, y en el blocksearch_top.tpl pegas el codigo del logo al final. 

 

Entiendo, he probado y se quita o se pone si. Pero no entiendo porque se ha jodido todo el resto.

 

De momento lo tengo como antes lo tenia. El header mostrando el logo y el blocksearch_top.tpl sin tocar del original.

 

Pero lo otro...

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Lo he hecho bien y esta todo OK!!

 

Solo me falta mover el bloque de buscar mas a la izquierda.. para asegurar.. eso exactamente donde lo toco?

 

 

Gracias nadie y galindogadea

 

Por lo que veo en tu tienda: http://frutossecosangulo.com/ mas o menos esta bien, en la plantilla por  defecto cuando haces lo que te digo queda casi cuadrado, en tu caso como usas la minimal theme o como llame la plantilla que usas, veo que tienes que hacer un retoque de css, es decir en tu fichero:

http://frutossecosangulo.com/themes/minimal_16_theme/css/modules/blocksearch/blocksearch.css

Veo que tienes esto:

 @media (min-width: 1200px) {
      #search_block_top #searchbox {
    width: 70%; right:-180px;} }

Dejalo asi:

 @media (min-width: 1200px) {
      #search_block_top #searchbox {
    width: 70%; } }

---

 

Actualmente en tu tienda se ve así:

 

Adjunto Imagen

 

cabecerafk.png

 

Con lo que te acabo de comentar se tiene que ver como te muestro en la siguiente captura.

 

Adjunto Imagen

 

cabecerafkbien.png

  • Like 1
Link to comment
Share on other sites
  • 6 months later...
Alexeu Newbie

Alexeu

Posted
Posted

Hola, he estado haciendo los pasos para centrar el logo, pero el logo me aparece 2 veces y todo descuadrado. No se que hacer para que sólo me salga un logo.

Podríais ayudarme?.

 

Gracias de antemano.

Link to comment
Share on other sites
igargi Newbie

igargi

Posted
Posted

Hola, he estado haciendo los pasos para centrar el logo, pero el logo me aparece 2 veces y todo descuadrado. No se que hacer para que sólo me salga un logo.

Podríais ayudarme?.

 

Gracias de antemano.

Buenas!

 

Puedes dejarme el link a tu web y lo miro? :)

 

Un saludo

Link to comment
Share on other sites
igargi Newbie

igargi

Posted
Posted

Eso es por que lo has copiado dos veces...

 

En header.tpl debes borrar este div y todo lo que contiene.

<div id="header_logo">
</div>

Te recomiendo restaurar una copia de seguridad y editar el header.tpl de nuevo, seguramente haras antes :)

Link to comment
Share on other sites
Alexeu Newbie

Alexeu

Posted
Posted (edited)

header.tpl

{*
* 2007-2015 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2015 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<html{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}>
<head>
<meta charset="utf-8" />
<title>{$meta_title|escape:'html':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:'html':'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}" />
{/if}
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
{/foreach}
{/if}
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}

<!--[if IE 8]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">
{if !isset($content_only) || !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'}{if isset($geolocation_country) && $geolocation_country} <span class="bold">{$geolocation_country|escape:'html':'UTF-8'}</span>{/if}</p>
</div>
{/if}
<div id="page">
<div class="header-container">
<header id="header">
<div class="banner">
<div class="container">
<div class="row">
{hook h="displayBanner"}
</div>
</div>
</div>
<div class="nav">
<div class="container">
<div class="row">
<nav>{hook h="displayNav"}</nav>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

</div>
</div>
</div>
</header>
</div>
<div class="columns-container">
<div id="columns" class="container">
{if $page_name !='index' && $page_name !='pagenotfound'}
{include file="$tpl_dir./breadcrumb.tpl"}
{/if}
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>
</div>
<div class="row">
{if isset($left_column_size) && !empty($left_column_size)}
<div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
{/if}
{if isset($left_column_size) && isset($right_column_size)}{assign var='cols' value=(12 - $left_column_size - $right_column_size)}{else}{assign var='cols' value=12}{/if}
<div id="center_column" class="center_column col-xs-12 col-sm-{$cols|intval}">
{/if}

blocksearch-top.tpl

{*
* 2007-2015 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2015 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- Block search module TOP -->
<div id="search_block_top" class="col-sm-4 clearfix">
	<form id="searchbox" method="get" action="{$link->getPageLink('search', null, null, null, false, null, true)|escape:'html':'UTF-8'}" >
		<input type="hidden" name="controller" value="search" />
		<input type="hidden" name="orderby" value="position" />
		<input type="hidden" name="orderway" value="desc" />
		<input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
		<button type="submit" name="submit_search" class="btn btn-default button-search">
			<span>{l s='Search' mod='blocksearch'}</span>
		</button>
	</form>
</div>


<!-- /Block search module TOP -->
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div >

Gracias

Edited by Alexeu (see edit history)
Link to comment
Share on other sites
igargi Newbie

igargi

Posted
Posted

Buenas,

 

 

Debes tener otro logo en el header, por que la imagen aparece donde está esto :

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

Entonces, desde MODULOS -> POSICONES DE LOS MODULOS revisa que no haya ninguna imagen en hook_top

 

Un  saludo

Link to comment
Share on other sites
Alexeu Newbie

Alexeu

Posted
Posted

Buenas,

 

 

Debes tener otro logo en el header, por que la imagen aparece donde está esto :

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

Entonces, desde MODULOS -> POSICONES DE LOS MODULOS revisa que no haya ninguna imagen en hook_top

 

Un  saludo

No tengo nada. Te ajunto captura del backoffice.. 

post-365943-0-14868500-1436294824_thumb.jpg

Link to comment
Share on other sites
igargi Newbie

igargi

Posted
Posted

Qué raro...

 

Has probado a buscar el "div" entre todos los archivos de toda la web a ver si sale en algún otro lado?

 

Un saludo!

O mira a ver si en el Hook "{hook h="displayBanner"}" hay algo :)

Link to comment
Share on other sites
  • 9 months later...
  • 4 months later...
igargi Newbie

igargi

Posted
Posted

Hola buenos dias, muy util el posteo. Tengo una consulta como hago para que me quede todo en linea recta? Los botones me quedan en ubicacion superior y el logo en ubicacion inferior. Mi idea es que quede todo en linea recta. Saludos a todos!

 

Buenas,

 

Puedes poner un enlace a la web para echarle un vistazo? Gracias:)

Link to comment
Share on other sites
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...