Modifica dell'elenco prodotti categoria

Spesso il cliente chiede al designer del suo Zen Cart di definire meglio la disposizione grafica degli articoli presenti negli elenchi di categoria.

Come nell'esempio riportato qui sotto e presente nella demo.

Per quanti abbiano familiarità con selettori e CSS la modifica risulterà banale, ma in realtà i più non hanno idea di "cosa-fare-dove". La modifica è presto attuata ...

Per prima cosa aprire il CSS del template utilizzato, nel ns caso sarebbe lo stylesheet.css del template "classic" (della distribuzione), posto in includes/templates/classic/css/ quindi procedere all'inserimento dei due selettori, che serviranno a spaziare un box articolo dall'altro per un valore di 12 pixel, dare un margine destro e disporre una riga rosso scuro (in questo caso) e allineare a sinistra il testo descrittivo:

.productListing-data {padding-top: 12px; padding-bottom: 12px; padding-right: 12px; margin-right:1.0em; border-bottom: 1px solid #cc0000; }
.listingDescription {text-align: left; }

Copiare + incollare nel CSS e visualizzare il risultato.

Il risultato dovrebbe essere come l'immagine qui sopra ...
Modificare quindi secondo le proprie esigenze di design:

• il colore della riga fra un box e l'altro
  
• il margine interno sopra, sotto ed a destra
• il margine esterno verso destra

Non desiderando il testo descrittivo dell'articolo allineato a sinistra, omettere il selettore "listingDescription".

Ampie ed ulteriori modifiche sono possibili grazie alla struttura di Zen Cart.