Definizioni dello Stylesheet di OSCommerce
La seguente guida è copyright PWS Team - OSCommerce.it
Viene rilasciata con licenza GPL. Citare SEMPRE la fonte in caso di distrbuzione o modifica di quanto segue.
Introduzione
La maggior parte dei colori, l’aspetto dei font, gli sfondi delle tabelle e altro possono essere cambiati attraverso lo stylesheet di OSCommerce. Oltre ai parametri di default, è possbilie inserire all’interno delle classi altri parametri a piacere seguendo le regole del W3C. In questo modo si possono impostare font, caratteri, dimensioni, bordi, colori, tabelle etc, tuttavia si deve tenere presente che i parametri dello stylesheet che non aderiscono strettamente alle direttive del W3C (ad es. quelli specifici di Internet Explorer) potrebbero avere dei risultati imprevedibili su altri browser. Tali parametri inoltre cambiano anche da versione a versione dello stesso browser.
Definizioni
.boxText
Cambia il font in tutti i Box.
.errorBox
Colore, carattere e dimensione del testo dei box di errore (contrassegnati dal triangolo rosso). Appaiono ad esempio quando i file di configurazione hanno i permessi in scrittura.
.stockWarning
Lo stile usato dei font usati nel box di avvertimento per il cliente quando inserisce nel carrello un prodotto che risulta fuori stock.
.productsNotifications
Lo style del box “Notifica aggiornamenti su questo prodotto” quando il cliente giunge al termine della procedura di acquisto. Si può anche inserire un colore di sfondo nel box con questa classe
.orderEdit
Lo stile dei link “Modifica ordine” mostrati nella fase di conferma dell’ordine.
BODY
Il colore definito in questa classe riguarda tutti i caratteri che fanno parte di testo non linkato.
Background color è il colore di background della pagina. È lo sfondo dove vengono poi disegnate le intestazioni e le colonne.
Questa classe modifica anche il bordo e il colore della finestra di visualizzazione del browsere. Consente di cambiare anche il colore delle scroll bar della finestra.
A
Stile e colore di tutti i link.
A:hover
Stile e colore usato sui link al verificarsi dell’evento “on mouse over”.
FORM
Lo stile usato nei form. Cambia il testo di box come la ricerca veloce.
TR.header
Cambia lo stile delle Table Row di tutte le table nell’header.
TR.headerNavigation
Stile usato nella barra di navigazione (table row).
TD.headerNavigation
Colore della freccia che punta in avanti nella barra di navigazione e del separatore |. Inserendo un colore di background qui si sovrascrivono le impostazioni del TR.headerNavigation.
Può essere inserito un colore per il bordo, un valore di padding che sposta solo la barra di navigazione, e un’immagine di background.
A.headerNavigation
Imposta i colori del testo linkato nella barra di navigazione (per es. “Home Catalogo”)
A.headerNavigation:hover
L’effetto che si ottiene con il “mouse over” sempre nella barra di navigazione.
TR.headerError
Lo stile ustao per i table row dei messaggi di errore. Il default è background rosso e testo bianco.
TD.headerError
Lo stile usato nei table data per i messaggi di errore.
TR.headerInfo
Lo stile usato per i messaggi informativi nell’intestazione. Cambia ad esempio il colore di background quando una nuova password è inviata all’utente che ha che ha usato la funzione di password reminder, per es. “Una nuova password è stata inviata al tuo indirizzo e-mai”.
TD.headerInfo
Lo stile usato per i messaggi di informazione mostrati nell’header.
TR.footer
Cambia il colore di sfondo della barra del footer dove sono mostrati data e numero dei visite.
TD.footer
Dimensione e colore del testo nel footer. Sovrascrive le impostazioni del TR.footer.
.infoBox
Imposta il colore del bordo intorno ai box informazioni fatta eccezione per i box “Il mio account”, “Modifia account”, “Aggingi nuovi indirizzi”.
.infoBoxContents
Imposta il colore di tutto ciò che viene visualizzato all’interno dei box e inserisce un bordo colorato intorno ai box di commento. Inserendo un colore per il testo in questa classe, si modificano i colori del testo nei box del catalogo come “I più venduti”, e i box “Il mio Account” etc. visti sopra.
.infoBoxNotice
.infoBoxNoticeContents
TD.infoBoxHeading
Imposta colori e testo delle colonne laterali e del box nuovi prodotti.
Se si imposta la dimensione dei font al di sopra di 10px si dovrà aumentare anche la dimensione delle icone del box in images/infobox
TD.infoBox, SPAN.infoBox
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 I colori delle righe pari e dispari di tutti gli elenchi.
TABLE.productListing
Imposta un bordo nella tabella che racchiude l’eleco prodotti
.productListing-heading
Colore di sfondo dell’intestazione dell’elenco prodotti, dove sono elencati I campi “Nome prodotto, Prezzo …” come da setup nella configurazione.
TD.productListing-data
Modifica lo sfondo e anche il padding dei vari campi.
A.pageResults
Imposta il colore del testo del link che rimanda alle diverse pagine dell’elenco dei prodotti.
A.pageResults:hover
Stessa funzione della classe precedente ma che si attiva all’evento “Mouse over”.
TD.pageHeading, DIV.pageHeading
Lo stile usato nelle intestazioni delle pagine. Per esempio il colore nella pagina checkout_success.php della scritta “Il tuo ordine è stato inoltrato”.
Change the size of the text here.
TR.subBar and TD.subBar
Lo stile usato nelle barre di navigazione inferiori.
TD.main, P.main
Lo stile del testo di tutte le aree di testo principali, il testo delle pagine “Il mio account”, “Modifica account” etc.
TD.smallText, SPAN.smallText, P.smallText
Stile del testo nel copyright sul footer della pagina, del testo “Includi sottocategorie nella ricerca avanzata e le informazioni nel fondo della pagina per i risultati, es. “Elenco da 11 a 20 di 32 prodotti”.
TD.accountCategory
Stile usato nelle cateogorie dell’account.
TD.fieldKey and TD.fieldValue
Testo usato nel form per la ricerca avanzata.
TD.tableHeading
Stile usato nelle intestazioni per la rubrica utente e nelle recensioni prodotto.
SPAN.newItemInCart
Stile per marcare i prodotti aggiunti al carrello.
CHECKBOX, INPUT, RADIO, SELECT
Stile usato in alcuni elementi dei form come la dimensione del testo all’interno dei menu a tendina (es. Menu produttori).
SPAN.greetUser
Stile del font usato per il messaggio di benvenuto nella home page.
TABLE.formArea
Colore interno al box de “Il mio account”, “Modifica account” etc. Imposta anche il bordo intorno ai box.
TD.formAreaTitle
Dimensione e colore del testo nelle intestazione delle pagine "Il mio account", "Modifica account” e “Aggiungi indirizzo alla rubrica”.
SPAN.markProductOutOfStock
Colore del testo usato per marcare I prodotti fuori stock.
SPAN.productSpecialPrice
Lo stile usato nei prezzi per i prodotti in offerta.
TD.checkoutBar
Stile della TD nella sequenza delle pagine di ordine. È la TD che mostra al cliente la fase di acquisto in cui si trova:
[ metodo di spedizione | pagamento | conferma | inviato! ]
SPAN.checkoutBarHighlighted
Il colore che evidenzia la fase in cui si trova il cliente durante l’acquisto nella stringa
[ metodo di spedizione | pagamento | conferma | inviato! ]
SPAN.errorText
Stile dei messaggi di errore.
.moduleRow
Stile dei moduli di pagamento e consegna.
.moduleRowOver
Colore del Mouse over nelle pagine di selezione dei metodi di pagamento e consegna.
.moduleRowSelected
Stile del modulo selezionato nelle pagine di selezione del pagamento e consegna.
.checkoutBarFrom, .checkoutBarTo
Stile del testo nel basso della pagina di conferma ordine. Il primo è la pagina da cui si proviene, il secondo è la pagina in cui si sta andando. ation Finished!"
.checkoutBarCurrent
Stile del testo della posizione attuale nella fase di acquisto.
.messageBox
.messageStackError, .messageStackWarning
.messageStackSuccess
Stile usato per il testo nei box messagggi
.inputRequirement
Stile usato nei testi per I campi obbligatori da riempire nei form. Il colore dell’asterisco e del testo “Informazione obbligatoria”.
.messageStack
Stile del testo nei messaggi di errore.
QUESTA GUIDA E' STATA REDATTA GRAZIE AL CONTRIBUTO DI TUTTO IL TEAM DI OSCOMMERCE.IT
SE TUTTO O PARTE DEL MATERIALE CHE LA COMPONE SARANNO RIUTILIZZATI SU ALTRI SITI, SI PREGA DI LASCIARE INTATTO IL RIFERIMENTO INIZIALE.
|
