Modificar el ancho de la página (Solucionado)

[STAHLFABRIK]

Hola amigos.

 

Soy bastante nuevo en el tema de Prestashop y aún tengo muchas dudas. Actualmente la que más me trae de cabeza es como modificar el ancho de página, tanto de la parte central como de las columnas laterales. Sé que hay que modificar ciertas líneas del css pero no sé cuales son.

 

Para más datos, uso la plantilla Prestashop, así, a secas.

 

Venga, un saludazo a todos y gracias de antemano.

Edited November 6, 2012 by STAHLFABRIK (see edit history)

[nadie]

Ancho contenedor:

 

Fichero:

 

/themes/default/css/grid_prestashop.css

 

Busca esto:

 

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

 

O lo pones manorra en el fichero:

 

/themes/default/css/global.css

 

dentro del

 

#center_column

[nadie]

Ancho Columnas: (Derecha y izquierda)

 

Fichero

 

/themes/default/css/grid_prestashop.css

 

.container_9 .grid_2 {
width: 202px;
}

 

Asi aumentaras el ancho tanto a la columna derecha como izquierda.

 

Si quieres hacerlo de forma individual..

 

Fichero:

 

themes/default/css/global.css

 

Busca esto:

 

#left_column {
}

 

Y esto:

 

#right_column {
}

 

Y colocas tu el width.

[nadie]

Columna central

 

Fichero:

 

themes/default/css/grid_prestashop.css

 

Busca esto:

 

.container_9 .grid_5 {
width: 535px;
}

[STAHLFABRIK]

Ufff, muchas gracias por la rapidez. Lo único es que no me aparece el archivo grid_prestashop.css y que no sé como poner el width en el global css. Soy muy novato.

[nadie]

Ufff, muchas gracias por la rapidez. Lo único es que no me aparece el archivo grid_prestashop.css y que no sé como poner el width en el global css. Soy muy novato.

 

¿Que versión de Prestashop usas?

 

¿Usas la 1.4, con la plantilla por defecto de la 1.4?

 

PD: Lo que te dije es en referencia a Prestashop 1.5

[STAHLFABRIK]

Sí, uso la 1.4 con la plantilla por defecto 1.4

[nadie]

Sí, uso la 1.4 con la plantilla por defecto 1.4

 

Contenedor:

 

Fichero:

 

themes/prestashop/css/global.css

 

Busca esto:

 

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
}

 

Columnas - (Lateral Izquierda - Derecha)

 

themes/prestashop/css/global.css

 

Busca esto:

 

#left_column {
clear: left;
width: 191px;
margin-right: 21px;
overflow: hidden;
}

 

#right_column {
width: 191px;
margin-left: 21px;
overflow: hidden;
}

 

 

Columna Central

 

#center_column {
width: 556px;
margin: 0 0 30px 0;
overflow: hidden;
}

[STAHLFABRIK]

Ok, ahora ya me cuadra del todo. Lo que tengo duda es qué valores hay que ponerle al widht y al margin.

 

Siento ser tan plasta.

[nadie]

Ok, ahora ya me cuadra del todo. Lo que tengo duda es qué valores hay que ponerle al widht y al margin.

 

Siento ser tan plasta.

 

Depende como quieras dejar la pagina )

[STAHLFABRIK]

Pero quiero decir... el widht pone 556 px, ¿eso es el ancho?

[nadie]

Pero quiero decir... el widht pone 556 px, ¿eso es el ancho?

 

Ese width exacto es el width de la columna "central" en tu tienda.

 

Un Saludo

[STAHLFABRIK]

Ahora sí voy encaminado.

 

Infinitas gracias por tu ayuda.

 

Un abrazo.

[nadie]

Ahora sí voy encaminado.

 

Infinitas gracias por tu ayuda.

 

Un abrazo.

 

 

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje, 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 en el foro, para guiarte por este mundo oscuro y tenebroso.

[STAHLFABRIK]

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje, 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 en el foro, para guiarte por este mundo oscuro y tenebroso.

 

Hecho.

[nadie]

Hecho.

 

Perfecto !

 

Gracias por confiar en la comunidad de Prestashop.

[wippa]

Meto post por aquí. Efectivamente en PS 1.4 no hay grid ni omegas. Hay Alfalfa. Yo he seguido el rastro hasta aquí y me he tenido que pirular yo mismo la solución, y la dejo aquí por si alguien la necesita.

 

En lo que yo he visto;

 

#center_column {

width: 556px;

margin: 0 0 30px 0;

overflow: hidden;

}

 

Si pongo eso afecta al div center en cualquier caso y tiende a destrozarte las demás vistas (No sólo del index vive el hombre).

 

Mi interés reside en aplicar sólo un ancho full cuando esté en el index, para mejorar la portada, únicamente. Lo más efectivo que veo es modificar en el header.tpl con un if/else y que en caso de coincidir con index el div tenga otra clase. A mí me ha funcionado fine.

 

Ejemplo del global modificado: Esta es una nueva línea, por encima del #center_column.products_block o donde se prefiera.

 

#center_column.amplio {
width: 78%;
}

 

El 78% me lo he sacado de la manga, he probado varios hasta dar con el útlimo válido. Si tienes borders en la clase products_block y se te va el 4º elemento abajo, es porque hemos sobrepasado el ancho total. Con bajar a 77% se arreglaría.

Otra opción es usar medidas en px.

 

Y esto para el Header.tpl

 

<!-- Center -->
{if $page_name != "index"}
<div id="center_column" class="column">
{else}
<div id="center_column" class="amplio">
{/if}

 

Saludetes

Edited April 22, 2013 by wippa (see edit history)

[nadie]

Meto post por aquí. Efectivamente en PS 1.4 no hay grid ni omegas. Hay Alfalfa. Yo he seguido el rastro hasta aquí y me he tenido que pirular yo mismo la solución, y la dejo aquí por si alguien la necesita.

 

En lo que yo he visto;

 

 

 

Si pongo eso afecta al div center en cualquier caso y tiende a destrozarte las demás vistas (No sólo del index vive el hombre).

 

Mi interés reside en aplicar sólo un ancho full cuando esté en el index, para mejorar la portada, únicamente. Lo más efectivo que veo es modificar en el header.tpl con un if/else y que en caso de coincidir con index el div tenga otra clase. A mí me ha funcionado fine.

 

Ejemplo del global modificado: Esta es una nueva línea, por encima del #center_column.products_block o donde se prefiera.

 

<!-- Center -->
{if $page_name != "index"}
<div id="center_column" class="column">
{else}
<div id="center_column" class="amplio">
{/if}

 

El 78% me lo he sacado de la manga, he probado varios hasta dar con el útlimo válido. Si tienes borders en la clase products_block y se te va el 4º elemento abajo, es porque hemos sobrepasado el ancho total. Con bajar a 77% se arreglaría.

Otra opción es usar medidas en px.

 

Y esto para el Header.tpl

 

<!-- Center -->
{if $page_name != "index"}
<div id="center_column" class="column">
{else}
<div id="center_column" class="amplio">
{/if}

 

Saludetes

 

Css exclusivo para la la columna central en la home

 

#index #center_column { }

 

Y así evitas tocar el fichero *.tpl

 

Lo mismo te vale para el resto de los casos.

[wippa]

Al código de tu "cita" se la va la pinza

 

Lo que tú has puesto es el método apropiado -

 

Yo tenía prisa en solucionarlo y como estaba metiendo también el if/else para quitar el {$HOOK_RIGHT_COLUMN} pues lo metí todo de una tacada sin caer en la cuenta. Lo gracioso es que hice una nueva clase en el css, pero no la que debía

 

Gracias.