Modificaciones varias en 1.4.6.2, con plantilla 1.4.5

[jjavii]

Hola a todos.

 

Os indico los 3 problemas que tengo haber me dais solución:

 

1)Quiero cambiar el listado de los productos como en el ejemplo siguiente, pero no sé programar en css, el listado que quiero es de 4 columnas tanto para categorías, subcategorías y productos. el siguiente ejemplo lo he sacado de prestashop addons, y es un módulo que cuesta 30€, y quiero hacerlo yo y ahorrar eso 30€.

 

2) Las fotos de las categorías, subcategorías, las quiero agrandar en "Imágenes"=>"medium", pero que no me modifiquen las pequeñas.

 

3) No puedo subir archivos flash (código embebido).

 

PONGO LAS FOTOS POR ORDEN DE LOS PROBLAMAS.

[4webs.es]

El punto 1 para ahorrarte esos euros, tendrás que editar la css product list, darle un acho que consideres para que te quepan los productos en cada linea y hacerlos flotar....suerte!

[jjavii]

Aqui pongo el programa de product_list.css, ¿qué modifico para listar los productos en 4 columnas??

 

ul#product_list {

list-style-type: none

}

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

#product_list li .left_block {

float:left;

padding-top:58px;

width:15px

}

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

padding:0 7px;

width: 342px;/* 356 */

border-right:1px dotted #ccc

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #ccc

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom

}

#product_list li span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff;

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

background-color: #990000

}

#product_list li h3 {

padding:0 0 10px 0;

font-size:13px;

color:#000

}

#product_list li a {

color: #000;

text-decoration: none;

}

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc,

#product_list li p.product_desc a {

color:#666;

}

 

#product_list li .right_block {

position:relative;

float: left;

width: 145px;

text-align: right

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

position:absolute;

top:0;

right:0;

display: inline-block;

font-weight: bold;

padding: 1px 5px;

font-size: 10px;

color: #fff;

text-transform: uppercase;

background: none repeat scroll 0 0 #9B0000

}

#product_list li .content_price {

margin:26px 0 15px 0;

}

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#990000

}

#product_list li span.availability {

display:none;

color: #488C40

}

#product_list li .ajax_add_to_cart_button {

padding-left: 20px

}

#product_list li .ajax_add_to_cart_button span {

display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

}

#product_list li .lnk_view {

display: inline-block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

 

Y esto lo quiero hacer no solo en los productos, sino también en las categorías y subcategorías.

 

Muchas gracias.