Jump to content

SOLUCIONADO. Alargar barra de inicio y parte superior de la web

TZT
 Share

Recommended Posts

TZT Newbie

TZT

Posted
Posted (edited)

Hola a todos, queria alargar el header en negro hasta "el infinito y la barra de inicio tambien que vaya hacia los lados hasta el final, pero que todo siga encuadrado en los 980pixeles en donde va dentro todo, pero q los colores de la barra y el negro de la parte de arriba vayan a los lados ahsta "el infinito", pero no lo q haya escrito, eso que siga encuadrado dentro de los 980pieles de largo que tiene "la web" Quizas me he explicado muy mal, seguro, pero no se como decirlo mas claro

 

version de prestashop 1.5

post-695807-0-18349200-1379173189_thumb.jpg

Edited by TZT (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
TZT Newbie

TZT

Posted
  • Author
Posted

Hola? Por favor, que necesito abrir el dia uno y sigo atascado desde hace semanas en lo mismo... :(

 

A lo que me refiero, por si no lo entendeis es a lo mismo que tiene esta web de prestashop, en el encabezado los colores grises / negros llegan hasta el final de la pantalla hacia los lados, tambien el footer... y todo el texto sigue encuadrado con el mismo margen

 

simplemente eso

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Ala.... pues si, eso... voy a ver :) yo creo que por no saber bien como explicarlo / buscarlo no encontre nada... a ver si encuentro tambien lo mismo pero de la parte superior... 

 

 

Muchisimas gracias :)

 

Fijate en el enlace, que te he pasado, ahi lo explica para el footer, la idea para la cabecera es parecido, pero tienes que editar el header.tpl )

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

TZT

Posted
  • Author
Posted (edited)

creo que tendre algun q otro problema mas antes de darlo por solucionado... perdon, pero soy totalmente novato en hacer webs, hace unas semanas no tenia ni la mas minima idea, y menos para comercio...

 

estoy primero con el footer, y lo he conseguido, contentisimo, pero hay un pequeño problema, todos los bloques de contacta con nosotros, siganos, mi cuenta... se han movido a la izquierda, ahora no sale centrado en la web

 

No se si puede estar el problema aqui: 

#block_contact_infos {

  float:left;
  width:225px;
 
poniendolo en center se queda una columna con todo hacia abajo, en right pues se alinea a la derecha, pero nos e centra, no se si me equivoco en el parametro que tengo que poner...
 
Creo que la he liado un poco con algo q hice anteriormente, no consigo cuadrarlo...
 
Me he metido a intentar lo del header pero tb se me descuadra todo de momento... asi q sigo con esto y poco a poco...
Edited by TZT (see edit history)
Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

me rindo, no consigo cuadrarlo bien... una cosa, no tengo el bloque de las categorias en el footer solo mi cuenta, contacte con nosotros, siganos e informacion

 

Si alguien me pudiera decir un poco mas exacto todo esto para termianrlo y hacerlo tambien en el header... 

 

Lo q me parece raro es q no encuentro info de como hacerlo en el header ... si alguien em dijera cambiamos el titulo del post por algo q sea mas facil de encontrar en las busquedas porque me parece a mi q es algo que mucha gente haria... me parece importante hacer eso, queda mucho mejor esteticamente.... da una sensacion de mas amplitud, aunque siga todo igual de encuadrado

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

 

creo que tendre algun q otro problema mas antes de darlo por solucionado... perdon, pero soy totalmente novato en hacer webs, hace unas semanas no tenia ni la mas minima idea, y menos para comercio...

 

estoy primero con el footer, y lo he conseguido, contentisimo, pero hay un pequeño problema, todos los bloques de contacta con nosotros, siganos, mi cuenta... se han movido a la izquierda, ahora no sale centrado en la web

 

No se si puede estar el problema aqui: 

#block_contact_infos {

  float:left;
  width:225px;
 
poniendolo en center se queda una columna con todo hacia abajo, en right pues se alinea a la derecha, pero nos e centra, no se si me equivoco en el parametro que tengo que poner...
 
Creo que la he liado un poco con algo q hice anteriormente, no consigo cuadrarlo...
 
Me he metido a intentar lo del header pero tb se me descuadra todo de momento... asi q sigo con esto y poco a poco...

 

 

Si sigue los pasos de mi guía el pie de pagina, te quedara centrado. ¿Lo has segudi al 100 por 100?

Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

No quiero decir que si, por si acaso sea que no... pero... incluso lo he revisado... no se si sera que he tocado algo anteriormente y por eso ahora no me cuadran las cosas? Por ejemplo, cuando quite el bloque de categorias , recuerdo que toque cosas para centrar las categorias del footer... ahora quizas me esta pasando factura lo que hice anteriormente?

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

No quiero decir que si, por si acaso sea que no... pero... incluso lo he revisado... no se si sera que he tocado algo anteriormente y por eso ahora no me cuadran las cosas? Por ejemplo, cuando quite el bloque de categorias , recuerdo que toque cosas para centrar las categorias del footer... ahora quizas me esta pasando factura lo que hice anteriormente?

 

¿Puede usted pasarme la dirección de su tienda?

 

Gracias,

Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

La tengo en local, podria subir capturas pero de todas maneras por fin he conseguido hacerlo en el footer... me canse tanto que volvi a reemplazar el archivo footer.tpl y global.css  e hice primero lo del tutorial y salio, ya luego segui haciendo las demas cosas para que quedara como lo tenia... supongo q algo toque que no debi tocar... Tambien como no tenia el bloque de categorias en el footer tuve q cambiar el width del footer para que quedara todo centrado... y nada... que lo consegui

 

Lo principal que buscaba era hacer lo mismo con el header y la barra donde esta inicio (aunq tb el footer, conseguido :) ) y eso si que ni idea, tambien he estado investigando , probando cosas parecidas como en el footer, pero al no ser tan igual, no lo consigo, y claro, siendo tan tan novato, como tenga q cambiar varios parametros o hacer algo diferente al tutorial ya no lo consigo... y sigo sin ver info sobre esto, aunq muchas webs lo tienen

 

Muchisimas gracias, con lo del footer es un buen paso jej seguire investigando mañana a ver...

Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

El header y la barra es misión imposible 23, muy novato como para averiguar lo que hay que cambiar yo solo... Puede que lo deje asi, me quedan 5 dias y se me echa el timpo encima... supongo que podre hacerlo luego de subirla, pero me hubiese gustado subirla ya como la quiero y centrarme ya en poner los productos, categorias... etc...

 

Seguire echando un vistazo a este hilo porsi alguien responde... Muchas gracias :)

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

El header y la barra es misión imposible 23, muy novato como para averiguar lo que hay que cambiar yo solo... Puede que lo deje asi, me quedan 5 dias y se me echa el timpo encima... supongo que podre hacerlo luego de subirla, pero me hubiese gustado subirla ya como la quiero y centrarme ya en poner los productos, categorias... etc...

 

Seguire echando un vistazo a este hilo porsi alguien responde... Muchas gracias :)

 

Ah creia que te habia pegado la respuesta del header, mañana te la pego que la tengo en mi pc.

 

¿El footer al final bien? ¿no?

Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

Si el footer finalmente esta hecho, algo lie antes de hacerlo y no quedaba bien pero reemplace el global.css y el footer.tpl y repeti una vez mas, y salio :) aunque lo principal que queria era hacerlo arriba en el header y la barra, pero tambien el footer, asi que bien, muchisimas gracias...

 

Quizas podrias añadir ese tutorial tambien al estupendo blog seguro que mucha gente quisiera hacerlo, veo muchas webs asi... (lei muchas cosas interesantes, demasiadas :) gracias

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Fichero:

/themes/default/header.tpl

Busca esto:

		<!-- Header -->
			<div id="header" class="grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
			</div>

Y déjalo encima de:

		<div id="page" class="container_9 clearfix">

----

 

Despues cambia esto:

	<!-- Header -->
			<div id="header" class="grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
			</div>

por

	<!-- Header -->
<div id="cabeceraSuper">
			<div id="header" >
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" >
					{$HOOK_TOP}
				</div>
			</div></div>

Despues, en el fichero:

/themes/default/css/global.css

Cambia esto:

#header {position:relative}

por esto

#header {
position: relative;
width: 980px;
margin: auto;
}

Y después le metes un background (por ejemplo una imagen de fondo) y un height al: 

#cabeceraSuper {
background....
height....

}
Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

En este paso:

Y después le metes un background (por ejemplo una imagen de fondo) y un height al: 

#cabeceraSuper {
background....
height....

}
 
puse esto: (lo de taet lo puse yo en el otro sitio tambien..)
 
#TAET2 {
height: 212px;
background: #444;
}
 
y consegui alargarlo todo como queria, pero la barra azul horizontal sigue sin llegar a los lados, no se si la estoy liando mas y voy por buen camino xD
Link to comment
Share on other sites
TZT Newbie

TZT

Posted
  • Author
Posted

SOLUCIONADO! Por fin! pues como decia en el tutorial, poner una imagen que cuadre con el header... ahi me quede algo atascado porque no sabia como medir todo pero al final poco a poco lo cuadre todo y ya esta hecho...

 

Muchas gracias "nadie" :)

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

SOLUCIONADO! Por fin! pues como decia en el tutorial, poner una imagen que cuadre con el header... ahi me quede algo atascado porque no sabia como medir todo pero al final poco a poco lo cuadre todo y ya esta hecho...

 

Muchas gracias "nadie" :)

 

Perfecto !

 

Un placer ayudarte y servirte!

 

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

 

PD: Cierro tema.

 

Saludos,

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