márgenes superior e inferior y redondeo de esquinas.

[Snapy]

Hola a tod@s,

 

en otra plataforma en la que estaba implementado mi tienda me salía, pero en prestashop no,

 

se trata simplemente de darle un margen a la tienda superior y otro inferior. y que se ves el fondo (diferente al de la tienda propiamente dicho), así como de redondear las esquinas.

 

imaginaos la siguiente tienda pero que en el margen superior e inferior quedase uun pequeño margen y se viera el fondo.

 

 

 

un saludo y gracias.

[E-kipper]

Hola.

Para el margen superior, en el archivo global.css sobre la línea 598 están los estilos de header: añade

margin-top: 50px;

(cambia 50 por el número de píxeles que quieras)

Para el margen inferior, en el archivo global.css sobre la línea 754 están los estilos de footer: añade

margin-bottom: 50px;

(cambia 50 por el número de píxeles que quieras)

Para redondear esquinas tienes que localizar los estilos de cada elemento que quieras redondearle las esquinas, y añadir

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:10px;

Por ejemplo, para las imágenes tienes que añadir estilos para la clase img:

.img{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:10px;
}

ya que por defecto no añade ningún estilo para las imágenes, y elimina el estilo por defecto de los navegadores.

Saludos.

Edited May 8, 2013 by E-kipper (see edit history)

[Snapy]

Hola, gracias por las molestias, pero he intentado lo que me has dicho y no sale.

 

puse lo que me dijiste después del z-index:10; (que no sé para que sirve):

 

#header {z-index:10;

margin-top: 20px;}

 

y no hace nada.

 

de una plataforma anterior, he puesto dentro del #header:

 

margin-top: 20px;

margin-bottom: 20px;

 

 

pero lo único que he conseguido lo podeis ver aquí:

 

espacenter.com/prestashop.

 

 

 

venga , un saludo y gracias

Edited May 8, 2013 by Snapy (see edit history)

[OlivierJM]

Hola.

Para el margen superior, en el archivo global.css sobre la línea 598 están los estilos de header: añade

margin-top: 50px;

(cambia 50 por el número de píxeles que quieras)

Para el margen inferior, en el archivo global.css sobre la línea 754 están los estilos de footer: añade

margin-bottom: 50px;

(cambia 50 por el número de píxeles que quieras)

Para redondear esquinas tienes que localizar los estilos de cada elemento que quieras redondearle las esquinas, y añadir

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:10px;

Por ejemplo, para las imágenes tienes que añadir estilos para la clase img:

.img{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:10px;
}

ya que por defecto no añade ningún estilo para las imágenes, y elimina el estilo por defecto de los navegadores.

Saludos.

 

Muchisimas Gracias compañero. Me ha funcionado niquelao en el Featured, a traves del Global CSS sobre la linea 267.

 

Me gustaria saber si puedo hacer lo mismo con el menu. No se que archivo del modulo del menu tocar exactamente.

 

Un saludo

[nadie]

Me gustaria saber si puedo hacer lo mismo con el menu. No se que archivo del modulo del menu tocar exactamente.

 

Un saludo

 

Bordes redondos en el menu,

 

Fichero:

 

/modules/blocktopmenu/css/superfish-modified.css

 

O en caso de que lo tuvieras sobreescrito en tu plantilla, fichero:

 

/themes/tu-plantilla/css/modules/blocktopmenu/css/superfish-modified.css

 

Aplicalo dentro del:

 

.sf-menu

[nadie]

Bordes redondos en el menu,

 

Fichero:

 

/modules/blocktopmenu/css/superfish-modified.css

 

O en caso de que lo tuvieras sobreescrito en tu plantilla, fichero:

 

/themes/tu-plantilla/css/modules/blocktopmenu/css/superfish-modified.css

 

Aplicalo dentro del:

 

.sf-menu

 

Es decir, busca esto:

 

.sf-menu {
float: left;
margin-bottom: 1em;
}

 

y dejalo asi:

 

.sf-menu {
float: left;
margin-bottom: 1em;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:10px;
}

[OlivierJM]

Bordes redondos en el menu,

 

Fichero:

 

/modules/blocktopmenu/css/superfish-modified.css

 

O en caso de que lo tuvieras sobreescrito en tu plantilla, fichero:

 

/themes/tu-plantilla/css/modules/blocktopmenu/css/superfish-modified.css

 

Aplicalo dentro del:

 

.sf-menu

 

Ok perfecto. Me quede en el HTML4 y las hojas de estilo no eran tan complicadas. En aquella epoca se hablaba con que el futuro seria DHTML y ya ves... NO acertaron no.