Opencommercio - E-commerce in Italia

b.3. stylesheet.css

Il file stylesheet.css si trova nella cartella \catalog nelle due versioni MS1 e MS2. Modificando il file sytlesheet.css si può cambiare il Layout del negozio fatto con OSCommerce o Opencommercio.

Si possono impostare font, caratteri, dimensioni, sia del sito che dei blocchi, che dei loro bordi, colori, ecc. Le scritte racchiuse tra /*...*/ sono i commenti al codice. Chiunque può aggiungere i propri commenti al codice per una maggiore leggibilità e documentazione. Si possono aggiungere più parametri nei vari campi, separati dal punto e virgola (anche se può portare a una certa confusione…) es.

.boxText{

font-family:Verdana,Arial,sans-serif;font-size:10px;

}

e NOTARE! Tutte le istruzioni devono finire col punto e virgola: come nell'esempio:

.FORM {

display:inline;

}

ATTENZIONE! Tutti i commenti messi tra doppio slash // sono commenti dell'autore.

Ecco le spiegazioni delle singole voci:

font-size: dimensione del carattere

font-family: il font( es. Arial,Helvetica,Verdana,Sans-Serif;): usare solo i font più usuali sul web, altrimenti, se non riconosciuti, verranno sostituiti da quelli standard.

font-weight: il peso dei caratteri(es. sottolineato, corsivo, grassetto)

background: il colore di sfondo (es. Come nome=#white oppure in esadecimale Hex= #003366)

.boxText cambia la dimensione del testo in tutti i box. Si consiglia di impostare il parametro padding per avere spazio a sinistra e a destra del testo.
.errorBox Colore e dimensione testo dei box d'errore (quelle col triangolo giallo): in pratica le finestrelle dei warning: "Il file non esiste", ecc.NON MODIFICARE.

.stockWarning. Lo stile per il testo nel warning del livello delle scorte (se non ci sono abbastanza scorte di quel prodotto). Solo se abilitato nel Pannello di Amministrazione >> Configurazione >> Visualizza disponibilità.

.productsNotifications Modifica lo sfondo del blocco checkout_success

.orderEdit Il colore dei links "Modifica" nella pagina di conferma ordine.

BODY
Color è il colore del testo nei blocchi sia di sinistra che di destra e, naturalmente, il colore del testo nella pagina. Preimpostato a nero #000000.

Background è il colore di sfondo, di basedella pagina impostato su #FFFFFF (bianco). ATTENZIONE! Non modifica il colore del header (logo, ecc.). Questo può essere modificato nel file header.php nella cartella \catalog\includes\.

margin: 0px (Zero, non la lettera O di Oslo maiuscola) significa attaccato al bordo: se si desidera un margine dal bordo, inserire es. 5px (= 5 pixel).

In questo stile si possono anche aggiungere i colori della barra scroller di scorrimento della finestra del browser. Es. provate ad aggiungere le seguenti proprietà:

scrollbar-face-color:#336699;

scrollbar-highlight-color:#ADD8E6;

scrollbar-3dlight-color:#6A9FBF;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#000080;

scrollbar-arrow-color:#6A9FBF;

scrollbar-track-color:#6A9FBF;

A: Il colore per TUTTI i link dell'intero negozio.

text-decoration: none; NONE significa = NESSUNA sottolineatura del testo del link (di solito sottolineato).

A:hover Modifica il colore del link da nero al colore indicato (#AABBDD) quando si passa sul link col mouse (hover).

text-decoration: modifica la sottolineatura del link nel browser.

FORM modifica lo stile dei form: es. della scritta "Usa parole chiave per cercare il prodotto".

display: parametri possibili: inline, block, list-form oppure none (lasciare inline!)

color:#... (indicare) modifica il colore del testo nel blocco Ricerca. Preimpostato default su #000000 (nero)

TR.header //Non si dovrebbe modificare. // Prima riga in tutte le tabelle (row.header).

TR.headerNavigation: stile dei breadcrumb, cioè i link di navigazione in alto a sinistra "Top >> Catalog >> ecc."

background: Colore di sfondo della riga della tabella, es. nella index del negozio.

family: Indicare font Verdana o Arial o sans-serif

size: dimensione 10 Pixel (grandezze tipografiche indicate in Point, Cicero o Pixel).

background color: ATTENZIONE!! RIGA 12 E IL VERO COLORE DI SFONDO, NON RIGA 6!!

color. Colore del testo, impostato a #ffffff (bianco)

weight: Colore testo in grassetto (bold)

TD.headerNavigation colore delle freccette e della barra verticale che separa i link suddetti.

Il colore di background impostato quì sovrascrive quello indicato in TR.headerNavigation. Si può aggiungere un bordo per separare l'header dalle categoire dei prodotti. Si può aggiungere anche un'immagine di sfondo...

A.headerNavigation Configura il colore del testo nella barra di navigazione, esempio nella index >> categorie > dove sono? Proprio sotto il logo di oscommerce o del negozio.

A.headerNavigation:hover "hover" signi fica: modifica il colore del link nel colore indicato, quando si passa sopra col mouse.

TR.headerError messaggi di errore che appaioni nell'header

TD.headerError come sopra: di default sfondo rosso e scritte bianche.

TR.headerInfo Modifica il colore di sfondo delintestazione del blocco La nuova password stata spedita allindirizzo e-mail indicato.

TD.headerInfo font, dimensione, colore, ecc. del testo nel blocco suddetto.

TR.footer Modifica il colore della riga di tabella Data, numero di visitatori dal .....in fondo alla pagina (footer).

TD.footer Modifica il colore di contrasto delle scritte suddette, dimensione, ecc. ATTENZIONE! Il colore di sfondo diverso di TR.footer verrà sovrascritto da TD.footer. SCEGLIERE LO STESSO COLORE DI SFONDO!

.infoBox ATTENZIONE! Solo da quì si fissano i colori dei bordi dei blocchi sinistri e destri. ECCEZIONE: non modifica i bordi dei blocchi “Mio account”, “Registrati“ e Modifica account.

.infoBoxContents Imposta il colore di tutto l'interno dei blocchi. Si può colorare anche il testo, ma solo dei numeri e le intestazioni dei blocchi “Mio account”, “Registrati“ e Modifica account. background: Colore di sfondo del contenuto di tutti i blocchi, ma anche del bordo dei blocchi dei Commenti.

.infoBoxNotice stile del blocco della pagina checkout_payment.php quando si inserisce un numero di carta di credito o data scadenza sbagliati

.infoBoxNoticeContents come sopra, ma stile del contenuto di quel blocco.

TD.infoBoxHeading per impostare le intestazioni dei blocchi di sinistra e di destra e modifica testi, font, dimensione, ecc. , colore di sfondo dei blocchi informazione e del blocco Novità. ATTENZIONE! Se si modifica la dimensione del testo a più di 10 pixel, bisogna poi aumentare anche la larghezza dei blocchi (Default 125px) nel file \includes\application_top.php circa alla linea 56

// customization for the design layout

define('BOX_WIDTH', 125);

portare il numero 125 esempio a 135. Inoltre si può aggiungere del padding (distanza dai bordi delle scritte).

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even Imposta il colore del bordo dei blocchi pari (even) e dispari (odd).

TABLE.productListing Colore di sfondo dell'intestazione nella pagina „Le nostre offerte“ dove vengono visualizzati i prodotti con Ordina, prodotti, prezzi, produttore....

.productListing-heading Il colore dello sfondo dell'intestazione della pagina delle offerte.

TD.productListing-data Modifica il colore di sfondo della lista dei prodotti: sicuramente uno stile da modificare e personalizzare.

A.pageResults colore numero di pagina come in /includes/split_page_results.php quando sono indicate più pagine, es. prodotti visualizzati: 1 di 2 (di 2 totali): pagina 1 nell'elenco prodotti, sia sopra che sotto a secondo dell'impostazione nel Pannello di Amministrazione >> configurazione >> elenco prodotti (posizione della barra di navigazione Prec/Prossimo).

A.pageResults:hover modifica il colore del numero di pagina in cui si è posizionati.

TD.pageHeading, DIV.pageHeading Stile delle intestazioni di pagina tipo nel link a checkout_success.php delle scritte "Il suo ordine stato eseguito" oppure "Cosa c'è di nuovo?", "Buon acquisto" e simili. E i testi di tutte le pagine dei prodotti. Sicuramente da provare a modificare la dimensione del testo.

TR.subBar e TD.subBar Stile di sottobarre di navigazione. .

TD.main, P.main Font principale della descrizione Prodotto/Articolo oppure nel Pannello di Amministrazione in Catalogo >> Categorie articoli nella descrizione del prodotto aggiungendo codice HTML

testo, testo

. Anche per il testo principale (costante di lingua TEXT_MAIN) e dentro le pagine "Il mio account", "Modifica account", "Aggiungi indirizzo", "Notifiche".

TD.smallText, SPAN.smallText, P.smallText Stile del copyright in fondo alla pagina, del testo di "Includi sottocategorie" nella pagina di ricerca avanzata (advanced_search.php), scritta in fondo alla pagina dei prodotti come "Visualizza 11 di 20 risultati". Inoltre Font per scritte come per es. "Questo prodotto è stato aggiunto nel catalogo il ...“ oppure per es. della scritta sotto l'immagine del prodotto "Ingrandire l'immagine? Cliccare sull'immagine."

TD.accountCategory: testo delle categorie degli account.

TD.fieldKey and TD.fieldValue Nella pagina advanced_search.php per le scritte come "Categorie: Produttori: Prezzo da: Prezzo a:
Data dal: Data al:"

TD.tableHeading Dimensione titolo nella "Rubrica" ( address_book.php) e nella pagina recensioni product_reviews.php.

SPAN.newItemInCart Famiglia di font, dimensione e colore testo del blocco del Carrello quando si aggiunge un articolo...

CHECKBOX, INPUT, RADIO, SELECT Definisce il formato nel menu a discesa dei blocchi, es. nel blocco "Produttori", da non modificare!

SPAN.greetUser Nella prima pagina, la parola "OSPITE" nel testo di benvenuto. Definisce solo il font, dimensione e colore di quella parola. Per modificarne il contenuto, andare in italian.php nella cartella catalog\includes\languages alla linea define('TEXT_GREETING_GUEST').

TABLE.formArea Colore di sfondo del blocco "Mio Account", "Modifica Account" oppure "Aggiungere indirizzo". Si possono anche impostare i bordi di questi blocchi.

TD.formAreaTitle Definisce la dimensione, font del titolo "Mio Account", ecc. Se non si mette il colore del testo, sarà di default nero.

SPAN.markProductOutOfStock Definisce il testo di "Fuori disponibilità" dei prodotti fuori scorta.

SPAN.productSpecialPrice Definisce il formato del testo nel blocco "Offerte speciali".

TD.checkoutBar link in fondo alla pagina di acquisto:[ indirizzo di consegna | metodo di pagamento | conferma | finito! ]

SPAN.checkoutBarHighlighted Il teto in risalto che mostra in che pagina siamo dell'ordine nei link [ indirizzo di consegna | metodo di pagamento | conferma | finito! ]

SPAN.errorText stile per i messaggi di errore.

.moduleRow stile usato nei moduli di spedizione e pagamento.

.moduleRowOver Colore mouse over della barra nella pagina checkout_payment.php page quando si sceglie un metodo di pagamento.

.moduleRowSelected Colore della barra nella pagina delle spedizioni checkout_shipping.php e del metodo di pagmaneto scelto nella pagina checkout_payment.php.

.checkoutBarFrom, .checkoutBarTo Colore e testo dei link in fondo alla pagina di acquisto che mostra le altre pagine diverse da quella corrente, come
"Informazioni spedizione | Informazioni pagamento | Conferma | Finito!"

.checkoutBarCurrent Colore e testo dei link in fondo alla pagina di acquisto che mostra la pagina corrente, tra i link
"Informazioni spedizione | Informazioni pagamento | Conferma | Finito!"

.messageBox
.messageStackError , .messageStackWarning
.messageStackSuccess Stile dei blocchi per i messaggi: es. se si cancella un indirizzo primario nel proprio account.

.inputRequirement Stile dei campi obbligatori, es. nel modulo di registrazione, il colore dell'asterisco e le parole "Campi obbligatori".

.messageStack : veramente non lo so....

ATTENZIONE: prima di fare delle modifiche, salvare il file stylesheet.css corrente, poi fare delle prove: meglio in locale, salvando le modifiche fatte e aggiornando la pagina interessata del browser.