Personalizar Estilos CSS en Prestashop

 Se puede cambiar bastante la apariencia final de la plantilla por defecto que trae incluído Prestashop. Con editar unos pocos estilos en el Global.css del theme original, podemos crear un tema personalizado a nuestro gusto. A continuación detallo los principales estilos para modificar. El número de línea se corresponde con la versión 1.3.

Editar el contenedor global de los productos destacados (línea 963):

/* Special style for block products in center column */
#center_column .products_block { border: none }
#center_column .products_block { color: #595a5e }
#center_column .products_block h4 { line-height: 1.3em }
#center_column .products_block .block_content {
 background: #ffffff none;
 padding: 0

Para cambiar el color grisáceo que aparece en el fondo de los productos destacados de la categoría inicio (página principal), hay que editar la línea 971 (hoover) y 974 (fondo):

#center_column .products_block ul li:hover { background-color: #bdc2c9 }
#center_column .products_block ul li {
 float: left;
 background-color: #d0d3d8;
 margin-top: 0;
 padding: 0 0 1px;
 width: 133px;
 border-right: 1px solid white;
 border-bottom: 1px solid white

Editar la apariencia del listado de productos por categorías, fabricantes, etc., en la línea 1409:

/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none }
ul#product_list li {
 background: #ffffff;
 border: solid 1px #d0d3d8;
 padding: 6px;
 min-height: 130px;
 height: auto;
 clear: both;
 margin-bottom: 0.3em

Modificar el contenido de los “blocks” o cajas de los módulos laterales (categorías, fabricantes, etc.) en la línea 852:

div.block h4 a { color: #374853 }
div.block ul { list-style: none }
div.block ul.tree li { padding-left: 1.2em }
div.block a:hover { text-decoration: underline }
#left_column div.block .block_content a.button_large,
 #right_column div.block .block_content a.button_large { margin: 0 0 0 -3px }
div.block .block_content {
 border-left: 1px #d0d3d8;
 border-right: 1px #d0d3d8;
 padding: 0 0.7em;
 background: #EEF3F9 url(‘../img/block_bg.jpg’) repeat-x bottom left;
 min-height: 16px

60 Comentarios
  1. 19 octubre, 2010
  2. 20 octubre, 2010
  3. 23 diciembre, 2010
  4. 23 diciembre, 2010
  5. 12 febrero, 2011
  6. 26 marzo, 2011
  7. 30 marzo, 2011
  8. 30 marzo, 2011
  9. 30 marzo, 2011
  10. 5 abril, 2011
  11. 7 abril, 2011
  12. 8 abril, 2011
  13. 8 abril, 2011
  14. 26 mayo, 2011
  15. 20 septiembre, 2011
  16. 3 octubre, 2011
  17. 10 octubre, 2011
  18. 10 octubre, 2011
  19. 26 octubre, 2011
  20. 26 octubre, 2011
  21. 26 octubre, 2011
  22. 31 octubre, 2011
  23. 1 noviembre, 2011
  24. 4 noviembre, 2011
  25. 8 noviembre, 2011
  26. 8 noviembre, 2011
  27. 20 noviembre, 2011
  28. 29 noviembre, 2011
  29. 2 diciembre, 2011
  30. 9 febrero, 2012
  31. 15 febrero, 2012
  32. 22 febrero, 2012
  33. 22 febrero, 2012
  34. 24 febrero, 2012
  35. 27 febrero, 2012
  36. 1 marzo, 2012
  37. 1 marzo, 2012
  38. 4 marzo, 2012
  39. 5 marzo, 2012
  40. 12 abril, 2012
  41. 19 junio, 2012
  42. 19 junio, 2012
  43. 14 julio, 2012
  44. 15 julio, 2012
  45. 22 julio, 2012
  46. 24 julio, 2012
  47. 27 agosto, 2012
  48. 31 agosto, 2012
  49. 10 octubre, 2012
  50. 12 octubre, 2012
  51. 18 octubre, 2012
  52. 7 noviembre, 2012
  53. 14 mayo, 2013
  54. 14 mayo, 2013
  55. 5 octubre, 2013
  56. 3 marzo, 2014
  57. 18 marzo, 2014
  58. 18 marzo, 2014
  59. 1 abril, 2014
  60. 1 abril, 2014

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *