Come personalizzare un carrello Template Zen

August 29

Come personalizzare un carrello Template Zen


Zen Cart è un software open source che chiunque può utilizzare liberamente per il funzionamento di e-commerce carrelli della spesa per la vendita di beni materiali e digitali on-line. A partire dal luglio 2011 e Zen Cart versione 1.3.9h (Risorsa Collegamento # 1) non ci sono template override nel pannello di controllo amministrativo. È necessario modificare il codice del file PHP o CSS per eseguire tutte le modifiche al rapporto aspetto modello.

istruzione

Sostituire Immagini

1 Sostituire l'immagine del logo. Il logo e altri modelli di immagini si trovano nelle immagini cartella utilizzando il seguente percorso di file: / includes / templates / classica / immagini

Per modificare il testo, la dimensione o l'immagine nome alternativo associato con il nuovo logo, utilizzare un editor di codice sorgente per aprire il file header.php trova nel seguente percorso del file: includes / languages ​​/ inglese / header.php

Apportare modifiche al codice sulle linee 21 al 25, tra la seconda serie di apostrofi, per riflettere i cambiamenti desiderati. Non lasciare spazi tra le informazioni e apostrofi.

2 Carica una nuova immagine al server delle stesse dimensioni e con lo stesso nome di sovrascrivere l'immagine di intestazione corrente. La dimensione dell'immagine di testa è larga 760 pixel per 110 pixel di altezza, e il nome è: header_bg.jpg.

3 Carica la nuova immagine di nome tile_back.gif per sovrascrivere l'immagine barra del titolo esistente sul server. Le barre del titolo orizzontali osservati sul modello predefinito di Zen Cart sono larghi solo 11 pixel per 30 pixel di altezza e si ripetono come necessario per la costruzione di quello che appare come un tubo allungato. Creare un'immagine simile nel software di progettazione grafica di un colore desiderato, con o senza l'evidenziazione dimensionale e l'ombreggiatura.

Cambiare i colori e bordi

4 Aprire stylesheet.css in un editor di codice sorgente, che si trova nel set di file originale, seguendo questo percorso del file: /includes/templates/classic/css/stylesheet.css

5 Modificare i colori di sfondo. modello "classico" di Zen Cart ha uno sfondo blu pallido. Nel editor di codice, individuare Linea 16: background-color: # e5edf5;

I caratteri "# e5edf5" indicano un colore specifico del blu nel sistema di codice colore esadecimale HTML. (Rif 3) Per uno sfondo bianco, modificare il codice di #FFFFFF o per uso nero # 000000. Se si preferisce, inserire il codice per qualsiasi altro colore.

6 Modificare l'involucro del corpo principale. Il codice trovato sulla linea 186: border: 1px solid # 9a9a9a; controllare le strette linee grigie verticali che si affacciano sui lati sinistro e destro di Zen Cart.

opzioni di personalizzazione includono: Cambiare il codice HTML del colore a un colore preferito. Rendere il bordo più ampio, aumentando la dimensione dei pixel. Se si preferisce non confine, rimuovere questa riga di codice completamente, o renderlo invisibile in modo che si può utilizzare in un secondo momento. Per rendere la linea di comando invisibile al software, usare con un

"/" (barra, asterisco) all'inizio della linea e "/" (asterisco, barra) alla fine della linea.

7 Modificare i bordi del contenitore di contenuti. Linea 553: border: 1px solid # 9a9a9a; controlla i confini sinistro e destro del leftBoxContainer e rightBoxContainer. Il bordo inferiore verde è controllato da Linea 554: border-bottom: 5px solid # 336633;

8 Carica stylesheet.css al server. Utilizzare lo stesso percorso del file come nel file impostato per trovare la posizione corretta per sovrascrivere il file CSS esistente.