Jump to content

Solucionado-Modificar tamaño header logo - Plantilla newlook

Catema

By Catema
in Discusión general

 Share

Recommended Posts

Catema Newbie

Catema

Posted
Posted (edited)

Hola, queria hacer el espacio del logo más grande, luego con photoshop editarle texto, he desplazado el blocksearch para hacer espacio, hasta aquí bien, ya tengo el espacio. Guiandome a través de un post he intentado modificar:

#header_right {

position:relative;

float: right;

width:295px;

margin-top:22px

}

pero el logo sigue ocupando el mismo espacio y el buscador, carrito, idiomas, etc.. me queda desplazado fuera de la cabacera.

 

A lo mejor me valdria en lugar de modificar tamaño logo, poner un editor de texto en el top header, pero no lo consigo, he intentado trasladar un modulo texto en el top header y no me lo permite.

Alguien me puede ayudar?

Edited by Catema
Editado el título del tema, por estar completamente en mayúscula | Normas del foro | También para ser mas descriptivo (see edit history)
Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

Es importante que indiques siempre la versión que usas.

 

Que plantilla usas

 

etc..

 

En base a Prestashop 1.5.4.1, con la plantilla por defecto, ve al fichero:

 

modules/blocktopmenu/css/superfish-modified.css

 

Encuentra esto:

 

.sf-contener {
clear: both;
}

 

y dejalo asi:

 

.sf-contener {
clear: both;
padding-top:33px;
}

 

El 33 lo vas aumentando, para bajar el menu y que no choque con el logo.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Estimad@ Catema,

 

Recuerde que esta totalmente prohibido escribir los titulo de los temas, completamente en mayúscula.

 

Se te ha editado el titulo para el cumplimiento de las normas del foro, la próxima vez se borrara el tema de forma automática.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola, pido disculpas por lo del titulo, no lo sabia.

Tengo la version 1.5.3.1 y la plantilla es la newlook

 

Grácias.

 

Supongo, que hablamos de esta plantilla

 

http://themes-prestashop.info/demo1-5/newlook/fr/

 

En el fichero:

 

/themes/newlook/css/global.css

 

tienes esto:

 

img.logo {
float: left;
height: 100px;
margin-left: 5px;
padding-top: 0.5em;
width: 300px;
font-size: 2em;
font-weight: bold;
}

 

aumenta el width y el height de ese sitio.

 

Luego tambien tienes esto:

 

#header_logo {
float: left;
width: 300px;
display: block;
}

 

ponle el mismo width que pongas en el otro sitio

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Por otro lado, veo que tambien en el fichero:

 

/themes/newlook/css/global.css

 

tienes esto:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
}

 

añadele un width:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
}

 

tipo:

 

width: 643px;

 

eso lo calculas tu, segun veas.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Por otro lado, veo que tambien en el fichero:

 

/themes/newlook/css/global.css

 

tienes esto:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
}

 

añadele un width:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
}

 

tipo:

 

width: 643px;

 

eso lo calculas tu, segun veas.

 

Si bajas ese width, baja tambien el

 

margin-left, que tienes en el fichero:

 

/themes/newlook/css/modules/blockuserinfo/blockuserinfo.css

 

aqui:

 

#header_user {
position: absolute;
margin-left: 260px;
top: 35px;
}

 

ese 260 bajalo

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Mas cositas que te interesara de tu plantilla, (aunque esto creo que ya lo sabes), para mover el buscador, en el fichero:

 

themes/newlook/css/modules/blocksearch/blocksearch.css

 

tienes esto:

 

#search_block_top {
   width:215px;
   height:34px;
   border:1px solid #484747;
   position:absolute;
   margin-left:40px;
   *margin-left:-480px;
   top:46px;}

 

con el left y el top puedes ir jugando.

 

Mas cositas...

 

En el fichero:

 

/themes/newlook/css/modules/blocklanguages/blocklanguages.css

 

tienes esto:

 

#languages_block_top {position:absolute; width:145px;text-align:right;margin: 174px 0 0 420px; background:none;}

 

juega con ese margin, si se te van las banderitas de abajo al carajo.. al mover lo otro.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola Nadie, vale perfecto aun que tendré que retocar. Lo que pasa es que ahora todo lo de la derecha (blockserch, carrito, etc..) se me ha ido para abajo y la cabecera tambien me ha cogido más espacio. Pongo link para que lo puedas ver. http://www.labotik.com/es/

 

En fin, te digo en base a tu tienda, para dejarlo bien.

 

Fichero:

 

http://www.labotik.com/themes/newlook/css/global.css

 

Busca esto:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
}

 

Y dejalo asi:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
width: 440px;
}

 

Fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blockuserinfo/blockuserinfo.css

 

Busca esto:

 

#header_user {
position:absolute;
margin-left:260px;
top:35px;}

 

Y dejalo asi:

 

#header_user {
position: absolute;
margin-left: 46px;
top: 4px;
}

 

Fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blocksearch/blocksearch.css

 

Busca esto:

 

#search_block_top {
width: 215px;
height: 34px;
border: 1px solid #484747;
position: absolute;
margin-left: 400px;
top: 100px;
}

 

Dejalo asi:

 

#search_block_top {
width: 215px;
height: 34px;
border: 1px solid #484747;
position: absolute;
margin-left: 207px;
top: 83px;
}

 

Fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blocklanguages/blocklanguages.css

 

Busca

 

#languages_block_top {
position: absolute;
width: 145px;
text-align: right;
margin: 174px 0 0 480px;
background: none;
}

 

Dejalo asi:

 

#languages_block_top {
position: absolute;
width: 145px;
text-align: right;
margin: 174px 0 0 272px;
background: none;
}

 

De esa manera tu tienda, quedara como te adjunto en la siguiente imagen:

 

idid.png

Link to comment
Share on other sites
Catema Newbie

Catema

Posted
  • Author
Posted

Nadie, el primer paso seguro que es correcto, no lo encuentro, no será en el fichero global.css?

http://www.labotik.com/themes/newlook/css/modules/blockuserinfo/blockuserinfo.css

 

Busca esto:

 

#header_right {

position: relative;

float: right;

height: 132px;

background: #000;

}

 

Y dejalo asi:

 

#header_right {

position: relative;

float: right;

height: 132px;

background: #000;

width: 440px;

}

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Nadie, el primer paso seguro que es correcto, no lo encuentro, no será en el fichero global.css?

http://www.labotik.com/themes/newlook/css/modules/blockuserinfo/blockuserinfo.css

 

Busca esto:

 

#header_right {

position: relative;

float: right;

height: 132px;

background: #000;

}

 

Y dejalo asi:

 

#header_right {

position: relative;

float: right;

height: 132px;

background: #000;

width: 440px;

}

 

Si, en el global.css, es que al escribir se me pego el teclado xD (Ya esta corregido en el mensaje de arriba xD)

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola de nuevo Nadie, si quieres hacer una ojeada porfa, hay algo que no acabo de hacer bien, porqué me queda la cabecera mas grande y los blocs de la derecha abajo del todo. gracias.

 

Aqui:

 

http://www.labotik.com/themes/newlook/css/global.css

 

Acabas de poner:

 

#header_right {
position:relative;
float: right;
height:132px;
background: #000;
width: 440;
}

 

cuando tienes que poner:

 

#header_right {
position:relative;
float: right;
height:132px;
background: #000;
width: 440px;
}

 

(te falta el "px")

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Ahora has cambiado otra vez el ancho del logo, dedide una vez como quieres dejar el logo, no puedo estar todo el dia pendiente de si subes el logo a una medida o a otra.

Decide que anchura final que le vas a asignar al logo, y me avisas, y te vuelvo a decir todas las medidas del css para que no se descuadre todo.

 

 

Saludos,

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

porqué me queda la cabecera mas grande

 

El logo lo tienes a 450x112, no puedes poner aquí:

 

http://www.labotik.com/themes/newlook/css/global.css

 

#header_logo {
float: left;
width: 620px;
display: block
}


img.logo {
float: left;
	height:100px;
	margin-left:5px;
	padding-top:0.5em;
	width:620px;
font-size: 2em;
font-weight: bold
}

 

un 620 si no has subido la imagen desde Preferencias -> Temas a 620 (mas que todo porque se te quedara pixelado), pon un 450 que es lo que habia cuando yo te hice el ejemplo.

 

El ejemplo que yo te puse es para una anchura de 450.

 

Si tu quieres asignar mas ancho a la cabecera, dimelo el ancho exacto que quieres dejar y te digo como dejar el resto del css para que quede mas o menos bien.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Si esto està arreglado. Las medias del logo seran.

Anchura: 550px

Altura:112px

Grácias.

 

Y entonces para que colocas este ancho

 

#header_logo {
float: left;
width: 620px;
display: block
}


img.logo {
float: left;
height:100px;
margin-left:5px;
padding-top:0.5em;
width:620px;
font-size: 2em;
font-weight: bold
}

 

a 620 ¿?

 

Ese ancho debe ser igual que del logo.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Te digo ahora los parametros, en base al logo:

 

http://www.labotik.com/img/logo-1.jpg?1376683209

 

de

 

550 de ancho que has subido ahora.

 

Fichero:

 

http://www.labotik.com/themes/newlook/css/global.css

 

Esto:

 

#header_logo {
float: left;
width: 620px;
display: block;
}

 

y esto

 

img.logo {
float: left;
height: 100px;
margin-left: 5px;
padding-top: 0.5em;
width: 620px;
font-size: 2em;
font-weight: bold;
}

 

por esto

 

#header_logo {
float: left;
width: 550px;
display: block;
}

 

 

y por esto

 

img.logo {
float: left;
height: 100px;
margin-left: 5px;
padding-top: 0.5em;
width: 550px;
font-size: 2em;
font-weight: bold;
}

 

--

 

Luego en el mismo fichero, esto:

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
width: 440px;
}

 

por esto

 

#header_right {
position: relative;
float: right;
height: 132px;
background: #000;
width: 426px;
}

 

Luego en el fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blockuserinfo/blockuserinfo.css

 

Esto:

 

#header_user {
position: absolute;
margin-left: 46px;
top: 4px;
}

 

por esto

 

#header_user {
position: absolute;
margin-left: 37px;
top: 4px;
}

 

Luego, en el fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blocksearch/blocksearch.css

 

Esto:

 

#search_block_top {
width: 215px;
height: 34px;
border: 1px solid #484747;
position: absolute;
margin-left: 207px;
top: 83px;
}

 

por esto

 

#search_block_top {
width: 215px;
height: 34px;
border: 1px solid #484747;
position: absolute;
margin-left: 184px;
top: 83px;
}

 

Luego en el fichero:

 

http://www.labotik.com/themes/newlook/css/modules/blocklanguages/blocklanguages.css

 

Esto:

 

#languages_block_top {
position: absolute;
width: 145px;
text-align: right;
margin: 174px 0 0 272px;
background: none;
}

 

por esto

 

#languages_block_top {
position: absolute;
width: 145px;
text-align: right;
margin: 174px 0 0 259px;
background: none;
}

 

---

 

Con estos cambios, se te quedara como en la siguiente imagen:

 

realweb-1024x223.png

  • Like 1
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Nadie, finalmente ja está y ja entendi todo. Le he liado mucho no? jeje. :wacko:. 1000 grácias. Un saludo.

 

Bien ! (He visto que ha quedado bien)

 

Un placer ayudarte y servirte!

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

 

PD: Nos pasa a todos al principio, ya veras como cada vez entenderás mas cosas y te liaras en menos cosas.

 

Nos vemos por el foro !

 

Cierro tema

  • Like 1
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...