Jump to content

Modificar ancho de pagina en el tema prestashop_new [Solucionado]

dvid

By dvid
in Discusión general

 Share

Recommended Posts

dvid Newbie

dvid

Posted
Posted (edited)

Que tal!.

 

Estoy a punto de dejar mi tienda tal como la quiero. :)

 

Solo me faltan algunos detalles, entre ellos esta cambiar el ancho del contenedor central, ya que la descripción de los artículos viene en imágenes de 712px, mientras que el "div" tiene alrededor de 512pixeles de ancho.

 

Así que la pregunta es, ¿Como cambiar el ancho del "div" centra, y a la vez de la pagina para dar cabida a este cambio?

 

En el tema anterior, modificaba algunos valores del global.css, pero con el nuevo busque en todas las lineas y no encontré nada parecido.

 

Les dejo la imagen de los cambios, gracias de antemano!

 

http://img215.images...14/cambiosq.png

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

nadie

Posted
Posted

Que tal!.

 

Estoy a punto de dejar mi tienda tal como la quiero. :)

 

Solo me faltan algunos detalles, entre ellos esta cambiar el ancho del contenedor central, ya que la descripción de los artículos viene en imágenes de 712px, mientras que el "div" tiene alrededor de 512pixeles de ancho.

 

Así que la pregunta es, ¿Como cambiar el ancho del "div" centra, y a la vez de la pagina para dar cabida a este cambio?

 

En el tema anterior, modificaba algunos valores del global.css, pero con el nuevo busque en todas las lineas y no encontré nada parecido.

 

Les dejo la imagen de los cambios, gracias de antemano!

 

http://img215.images...14/cambiosq.png

 

Fichero:

 

/themes/prestashop_new/css/grid_prestashop.css

 

Busca esto, para el centro.

 

.container_9 .grid_5 {
width: 535px;
}

 

Y esto:

 

.container_9 {
margin: 0 auto;
width: 980px;
}

 

Para el contenedor.

 

 

Esto para el ancho de la columna left y right

 

.container_9 .grid_2 {
width: 202px;
}

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted

Gracias!.

 

excellencedogs, no entiendo bien el sistema que mencionas, el archivo generado simplemente lo copias y funciona??

 

Después de todo el cambio de tamaño no resulto tan fácil como yo esperaba (Que todo se acomodara mágicamente :) )

 

Después de varios cambios, logre esto, pero me faltan 2 detalles que no tengo ni idea de donde modificar.

 

La barra de búsqueda se movió, al igual que el carrito de compras. También me gustaría cambiar el recuadro de descripción corta de los artículos:

 

http://img849.imageshack.us/img849/2655/image3786.png

Link to comment
Share on other sites
Rubén Newbie

Rubén

Posted
Posted
Gracias!. excellencedogs, no entiendo bien el sistema que mencionas, el archivo generado simplemente lo copias y funciona?? Después de todo el cambio de tamaño no resulto tan fácil como yo esperaba (Que todo se acomodara mágicamente :) ) Después de varios cambios, logre esto, pero me faltan 2 detalles que no tengo ni idea de donde modificar. La barra de búsqueda se movió, al igual que el carrito de compras. También me gustaría cambiar el recuadro de descripción corta de los artículos: http://img849.imageshack.us/img849/2655/image3786.png

 

creo que tienes que cambiar el css "product.css"

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted

Gracias por los datos, excellencedogs.

 

Ya logre modificar el ancho de la descripcion corta, pero no logro encontrar la linea que mencionas (header.right)

 

La mas parecida es esta:

 

#header_right {

position:relative;

float: right

}

 

Trate con:

 

#header_right {

position:relative;

float: right

width: 100%;

}

 

Pero no hubo suerte.

 

Saludos!

Link to comment
Share on other sites
Lisius Newbie

Lisius

Posted
Posted (edited)

Siempre en el Global.css de su plantilla cambie lo siguiente:

 

#header_user {

clear: both;

float: right;

margin-top: 8px;

width: 535px;

}

 

sustituir por

 

#header_user {

clear: both;

float: right;

margin-top: -68px;

width: 535px;

}

 

para mover el bloque del buscador.

 

#search_block_top {

left: 0;

position: absolute;

top: 44px;

 

sustituir por:

 

#search_block_top {

left: 264;

position: absolute;

top: -44px;

 

puede seguir cambiando la posicion aumentando o dismiyuendo los valores.

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

nadie

Posted
Posted

Por otro lado, para que en la ficha del producto, el nombre y la pequeña descripción se vean mas anchos

 

Fichero:

 

Busca esto:

 

#pb-left-column {
float: left;
margin-left: 14px;
width: 255px;
}

 

en el fichero:

 

/themes/prestashop_new/css/product.css

 

Y dale un width mas alto.

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted (edited)

Siempre en el Global.css de su plantilla cambie lo siguiente:

 

#header_user {

clear: both;

float: right;

margin-top: 8px;

width: 535px;

}

 

sustituir por

 

#header_user {

clear: both;

float: right;

margin-top: -68px;

width: 535px;

}

 

para mover el bloque del buscador.

 

#search_block_top {

left: 0;

position: absolute;

top: 44px;

 

sustituir por:

 

#search_block_top {

left: 264;

position: absolute;

top: -44px;

 

puede seguir cambiando la posicion aumentando o dismiyuendo los valores.

 

No los encontre en ningun lado, estoy en el fichero /themes/prestashop_new/css/global.css

 

Lo adjunto para comprobarlo.

 

 

 

Por otro lado, para que en la ficha del producto, el nombre y la pequeña descripción se vean mas anchos

 

Fichero:

 

Busca esto:

 

#pb-left-column {
float: left;
margin-left: 14px;
width: 255px;
}

 

en el fichero:

 

/themes/prestashop_new/css/product.css

 

Y dale un width mas alto.

 

Gracias!

 

Saliendo del tema, creo que te funcionaría mucho mejor ese tema con prestashop 1.5 rc2 que al ser una versión candidata no tiene prácticamente bugs, a mi me funciona muy bien y me ha sido más fácil modificar la plantilla que con otras versiones

aquí mi página: http://articuloscaninos.com

 

Si ya no queda otra opción prefiero esperarme a la versión final, no creo que tarde demasiado.

3793.0.global.css

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

nadie

Posted
Posted

Hola, yo en tu web si veo en el fichero que adjuntas y también en tu web:

 

/themes/prestashop_new/css/global.css

 

Busca esto:

 

#header_right {
position: relative;
float: right;
}

 

 

Déjalo así:

 

#header_right {
position: relative;
float: right;
width: 800px;
}

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted

Jeje... eso me recordó mis inicios en programación... :) 3 horas revisando fallas para que al final el culpable sea un ;.... hahah.

 

Ya funciona!,

 

Solo queda centrar la barra de búsqueda... ¿Como haces para saber que lineas modificar??... intento inspeccionar los elementos con Firefox pero el código muchas veces es completamente diferente al que modificamos...

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Jeje... eso me recordó mis inicios en programación... :) 3 horas revisando fallas para que al final el culpable sea un ;.... hahah.

 

Ya funciona!,

 

Solo queda centrar la barra de búsqueda...

 

Fichero:

 

/themes/prestashop_new/css/modules/blocksearch/blocksearch.css

 

Y prueba hacer lo que te comento el usuario actionflash:

 

#search_block_top {

left: 0;

position: absolute;

top: 44px;

 

sustituir por:

 

#search_block_top {

left: 264;

position: absolute;

top: -44px;

 

puede seguir cambiando la posicion aumentando o dismiyuendo los valores.

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted (edited)

Modifique el global .css con los valores que me dio actionflash en lugar de los tuyos victor:

 

#header_user {
clear: both;
float: right;
margin-top: -68px;
width: 535px;
}

 

Y al cambiar la posición de la barra de busqueda, con sus valores, esta desaparece. Cambie el valor top por uno positivo y ya aparece, el correcto es 44px.

 

Sin embargo, he probado con todos los valores posibles para "left",, desde -100 hasta 800px pero se queda anclada la barra, no hay forma de moverla.

 

Ahora aparece en el lado derecho: :)

 

www.smarthing.com.mx

 

¿Que será???

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

nadie

Posted
Posted

Modifique el global .css con los valores que me dio actionflash en lugar de los tuyos victor:

 

#header_user {
clear: both;
float: right;
margin-top: -68px;
width: 535px;
}

 

Y al cambiar la posición de la barra de busqueda, con sus valores, esta desaparece. Cambie el valor top por uno positivo y ya aparece, el correcto es 44px.

 

Sin embargo, he probado con todos los valores posibles para "left",, desde -100 hasta 800px pero se queda anclada la barra, no hay forma de moverla.

 

Ahora aparece en el lado derecho: :)

 

www.smarthing.com.mx

 

¿Que será???

Para mover el buscador, simplemente tienes que hacer esto:

 

Fichero:

 

/themes/prestashop_new/css/modules/blocksearch/blocksearch.css

 

Buscas esto:

 

#search_block_top {
position: absolute;
top: 44px;
left: 0;
}

 

 

Y lo colocas asi:

 

#search_block_top {
position: absolute;
top: 44px;
left: 121px;
}

Link to comment
Share on other sites
dvid Newbie

dvid

Posted
  • Author
Posted

Si la combinación correcta, es esto para el global.css:

 

#header_right {

position: relative;

float: right;

width: 800px;

}

 

Y esto para el modulo:

 

 

/* block top search */

#search_block_top {

left: 30px;

position: absolute;

top: 44px;

}

 

 

Muchas gracias Victor!

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Si la combinación correcta, es esto para el global.css:

 

#header_right {

position: relative;

float: right;

width: 800px;

}

 

Y esto para el modulo:

 

 

/* block top search */

#search_block_top {

left: 30px;

position: absolute;

top: 44px;

}

 

 

Muchas gracias Victor!

 

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje del tema, pulsando en editar y después en "Usar editor completo", añadiendo la palabra "Solucionado" al titulo, esto ayudara, a mantener una mayor organización en el foro.

 

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

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