[Solucionado] Poner orden en la cabecera

leiro · May 25, 2013

Hola compañeros del foro:

Estoy intentando organizar la caberera y siguiendo vuestros consejos conseguí ampliar el logo ahora me falta poner en horizontal el (bienvenido) Idiomas y carrito.

Os dejo una foto para que veáis lo que busco.

Ahora tengo desactivado el "Smart cache" para las hojas de estilo para poder ver el CCS con Firegug pero no encuentro en donde tocar.

Esta en la web www.meganova.es

Gracias de antemano.

Edited May 25, 2013 by leiro (see edit history)

nadie · May 25, 2013

Para mover el bloque de idiomas al otro lado.

modules/blocklanguages/blocklanguages.css

Buscar:

#header_right #languages_block_top {
float: right;
margin: 0;
padding: 2px 6px 1px 6px;
-moz-border-bottom-right-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: none repeat scroll 0 0 #000;
}

Dejar:

#header_right #languages_block_top {
float: left;
margin: 0;
padding: 2px 6px 1px 6px;
-moz-border-bottom-right-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: none repeat scroll 0 0 #000;
}

leiro · May 25, 2013

Muchas gracias Nadie por tu ayuda. Funciona, ahora me falta desplazar el bienvenidos y ponerlo todo en la misma linea.

nadie · May 25, 2013

Muchas gracias Nadie por tu ayuda. Funciona, ahora me falta desplazar el bienvenidos y ponerlo todo en la misma linea.

1º Paso

Fichero:

modules/blockuserinfo/blockuserinfo.tpl

o

/themes/tu-plantilla/modules/blockuserinfo/blockuserinfo.tpl

(En caso de que lo tengas sobreescrito en la plantilla)

Bueno, una vez abierto el fichero, buscas esto:

<div id="header_user">
<ul id="header_nav">
 {if !$PS_CATALOG_MODE}
 <li id="shopping_cart">
  <a href="{$link->getPageLink($order_process, true)}" title="{l s='View my shopping cart' mod='blockuserinfo'}" rel="nofollow">{l s='Cart' mod='blockuserinfo'}
  <span class="ajax_cart_quantity{if $cart_qties == 0} hidden{/if}">{$cart_qties}</span>
  <span class="ajax_cart_product_txt{if $cart_qties != 1} hidden{/if}">{l s='Product' mod='blockuserinfo'}</span>
  <span class="ajax_cart_product_txt_s{if $cart_qties < 2} hidden{/if}">{l s='Products' mod='blockuserinfo'}</span>
  <span class="ajax_cart_total{if $cart_qties == 0} hidden{/if}">
   {if $cart_qties > 0}
 {if $priceDisplay == 1}
  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
  {convertPrice price=$cart->getOrderTotal(false, $blockuser_cart_flag)}
 {else}
  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
  {convertPrice price=$cart->getOrderTotal(true, $blockuser_cart_flag)}
 {/if}
   {/if}
  </span>
  <span class="ajax_cart_no_product{if $cart_qties > 0} hidden{/if}">{l s='(empty)' mod='blockuserinfo'}</span>
  </a>
 </li>
 {/if}
 <li id="your_account"><a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" rel="nofollow">{l s='Your Account' mod='blockuserinfo'}</a></li>
</ul>
<p id="header_user_info">
 {l s='Welcome' mod='blockuserinfo'}
 {if $logged}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" class="account" rel="nofollow"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>
  <a href="{$link->getPageLink('index', true, NULL, "mylogout")}" title="{l s='Log me out' mod='blockuserinfo'}" class="logout" rel="nofollow">{l s='Log out' mod='blockuserinfo'}</a>
 {else}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='Login to your customer account' mod='blockuserinfo'}" class="login" rel="nofollow">{l s='Login' mod='blockuserinfo'}</a>
 {/if}
</p>
</div>

Y lo dejas así:

<div id="header_user">
<ul id="header_nav">
 {if !$PS_CATALOG_MODE}
 <li id="shopping_cart">
  <a href="{$link->getPageLink($order_process, true)}" title="{l s='View my shopping cart' mod='blockuserinfo'}" rel="nofollow">{l s='Cart' mod='blockuserinfo'}
  <span class="ajax_cart_quantity{if $cart_qties == 0} hidden{/if}">{$cart_qties}</span>
  <span class="ajax_cart_product_txt{if $cart_qties != 1} hidden{/if}">{l s='Product' mod='blockuserinfo'}</span>
  <span class="ajax_cart_product_txt_s{if $cart_qties < 2} hidden{/if}">{l s='Products' mod='blockuserinfo'}</span>
  <span class="ajax_cart_total{if $cart_qties == 0} hidden{/if}">
   {if $cart_qties > 0}
 {if $priceDisplay == 1}
  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
  {convertPrice price=$cart->getOrderTotal(false, $blockuser_cart_flag)}
 {else}
  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
  {convertPrice price=$cart->getOrderTotal(true, $blockuser_cart_flag)}
 {/if}
   {/if}
  </span>
  <span class="ajax_cart_no_product{if $cart_qties > 0} hidden{/if}">{l s='(empty)' mod='blockuserinfo'}</span>
  </a>
 </li>
 {/if}
 <li id="your_account"><a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" rel="nofollow">{l s='Your Account' mod='blockuserinfo'}</a></li>
</ul>

</div>
<p id="header_user_info">
 {l s='Welcome' mod='blockuserinfo'}
 {if $logged}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" class="account" rel="nofollow"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>
  <a href="{$link->getPageLink('index', true, NULL, "mylogout")}" title="{l s='Log me out' mod='blockuserinfo'}" class="logout" rel="nofollow">{l s='Log out' mod='blockuserinfo'}</a>
 {else}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='Login to your customer account' mod='blockuserinfo'}" class="login" rel="nofollow">{l s='Login' mod='blockuserinfo'}</a>
 {/if}
</p>

nadie · May 25, 2013

Con eso has separado el bloque del carrito del bloque del login en el bloque de información personal, ahora vamos a ajustar el css.

Nos vamos al fichero:

modules/blockuserinfo/blockuserinfo.css

Buscamos esto:

#header_user_info {
clear:both;
float:right;
margin-top:10px;
padding:0;
font-size:12px
}

Y dejalo así:

#header_user_info {
float: left;
margin-top: 0px;
padding: 0;
font-size: 12px;
margin-left: 14px;
}

nadie · May 25, 2013

Con estos pasos que te he comentado, lo veras como te muestro en la siguiente imagen:

leiro · May 25, 2013

Nuevamente Gracias, lo tengo igual de tu muestra, lo único que en...

#header_user_info {

float:left;

margin-top:-14px; ----------- Aquí tuve que poner un valor negativo para que quedara en linea con el Idioma

padding:0;

font-size:12px;

margin-left: 70px; ----------- Y aquí darle mas margen

Supongo que no abrá problema y podrá quedar así.

Ahora lo intento alinear y eliminar el espacio en blamco, pero ¡me pierdo!

nadie · May 25, 2013

Nuevamente Gracias, lo tengo igual de tu muestra, lo único que en...

#header_user_info {

float:left;

margin-top:-14px; ----------- Aquí tuve que poner un valor negativo para que quedara en linea con el Idioma

padding:0;

font-size:12px;

margin-left: 70px; ----------- Y aquí darle mas margen

Supongo que no abrá problema y podrá quedar así.

Ahora lo intento alinear y eliminar el espacio en blamco, pero ¡me pierdo!

Espera, dejar el css como te he dicho y arriba el blockuserinfo.tpl dejalo así:

<p id="header_user_info">
 {l s='Welcome' mod='blockuserinfo'}
 {if $logged}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" class="account" rel="nofollow"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>
  <a href="{$link->getPageLink('index', true, NULL, "mylogout")}" title="{l s='Log me out' mod='blockuserinfo'}" class="logout" rel="nofollow">{l s='Log out' mod='blockuserinfo'}</a>
 {else}
  <a href="{$link->getPageLink('my-account', true)}" title="{l s='Login to your customer account' mod='blockuserinfo'}" class="login" rel="nofollow">{l s='Login' mod='blockuserinfo'}</a>
 {/if}
</p>
<div id="header_user">
<ul id="header_nav">
 {if !$PS_CATALOG_MODE}
 <li id="shopping_cart">
  <a href="{$link->getPageLink($order_process, true)}" title="{l s='View my shopping cart' mod='blockuserinfo'}" rel="nofollow">{l s='Cart' mod='blockuserinfo'}
  <span class="ajax_cart_quantity{if $cart_qties == 0} hidden{/if}">{$cart_qties}</span>
  <span class="ajax_cart_product_txt{if $cart_qties != 1} hidden{/if}">{l s='Product' mod='blockuserinfo'}</span>
  <span class="ajax_cart_product_txt_s{if $cart_qties < 2} hidden{/if}">{l s='Products' mod='blockuserinfo'}</span>
  <span class="ajax_cart_total{if $cart_qties == 0} hidden{/if}">
   {if $cart_qties > 0}
	 {if $priceDisplay == 1}
	  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
	  {convertPrice price=$cart->getOrderTotal(false, $blockuser_cart_flag)}
	 {else}
	  {assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
	  {convertPrice price=$cart->getOrderTotal(true, $blockuser_cart_flag)}
	 {/if}
   {/if}
  </span>
  <span class="ajax_cart_no_product{if $cart_qties > 0} hidden{/if}">{l s='(empty)' mod='blockuserinfo'}</span>
  </a>
 </li>
 {/if}
 <li id="your_account"><a href="{$link->getPageLink('my-account', true)}" title="{l s='View my customer account' mod='blockuserinfo'}" rel="nofollow">{l s='Your Account' mod='blockuserinfo'}</a></li>
</ul>
</div>

leiro · May 25, 2013

Genial.

Ahora esta igual que tu muestra, solo falta alinear.

nadie · May 25, 2013

Genial.

Ahora esta igual que tu muestra, solo falta alinear.

Ahora reduce el margin-top que tiene el carrito que tienes en la cabecera, fichero:

modules/blockuserinfo/blockuserinfo.css

Busca esto:

#header_right #header_user {
clear: both;
float: right;
margin-top: 8px;
}

Y prueba dejarlo así:

#header_right #header_user {
clear: both;
float: right;
margin-top: -18px;
}

leiro · May 25, 2013

Me quito el sombrero.

como dijo Sócrates “Sólo sé que no sé nada”

Muchas gracias

nadie · May 25, 2013

Me quito el sombrero.

como dijo Sócrates “Sólo sé que no sé nada”

Muchas gracias

Si quieres metele esto:

position: relative;
top: 11px;

al

#header_user_info

y al

#header_right #languages_block_top

nadie · May 25, 2013

(Haz lo ultimo que te he dicho un segundo)

leiro · May 25, 2013

Lo estaba haciendo y tienes razón, así mejora

nadie · May 25, 2013

Lo estaba haciendo y tienes razón, así mejora

Eso parece..

leiro · May 25, 2013

De nuevo muchas gracias, ha sido un post muy constuctivo y entretenido.

nadie · May 25, 2013

De nuevo muchas gracias, ha sido un post muy constuctivo y entretenido.

Por cierto, he visto que has puesto el carrito en el lateral, y el que tienes en la cabecera que pertenece al mismo modulo de bloque de informacion personal..... es simple adorno ahora mismo ¿no?

leiro · May 25, 2013

Ahora voy a quitar el del lateral, para ir metiendo mas cosas en la derecha, pero ya ves que yo tengo que ir haciendolo poquito a poco para no tropezar.

[Solucionado] Poner orden en la cabecera

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites