Blog de Diseño Web

Si queremos personalizar un poco nuestra tienda, podemos  crear  un tema desde 0, que no es en este caso, si nos, explicare como modificar el css del tema por defecto que viene en prestashop  y así personalizar un poco la tienda.

Primero de todo debemos crear un duplicado del tema prestashop de la carpeta themes/ y le ponemos otro nombre por ejemplo mitema

Entramos en el directorio mitema, y vemos que ta lleno de archivos .tpl eso son las plantillas del motor smarthy , lo que nos interesa es la carpeta css/ entramos y vemos que hay 3 archivos .css abrimos con nuestro editor favorito “notepad++” el global.css

La primera cosa que cambiaremos es el tamaño total de layout poniéndolo a 960px

Buscamos entre el codigo css /* global layout */ que es donde se definen las propiedades de layout del tema

El contenedor page es el padre de todos

[css]
#page {
width: 960px;
margin: 0 auto 0 auto;
padding-left:5px;
padding-right:5px;
text-align:left;
background-color: white;
}
[/css]

Como veis en la propiedad width le pongo 960px, si cambiamos eso tenemos que tener en cuenta de cambiar proporcionalmente las columnas que están definidas en

#left_column #center_column i #right_column

#left_column { width: 545px}

#center_column { width:  190px;}

#right_column { width: 190px;}

960px-(5+5) del padding de page = 950px que tenemos para nuestro contenido

Recuerde la propiedades margin y padding sirven para dar margen exterior o margen interior de un  contenedor.