Sommario
La manutenzione della pagina di un sito è un aspetto molto importante, poiché ci sono momenti in cui per vari motivi (problemi fornitori, aggiornamento del codice sorgente, entrata in vigore di nuove normative commerciali) in cui dobbiamo momentaneamente sospendere la nostra pagina, tuttavia, ciò che Il punto di vista dell'utente e del potenziale cliente deve rispecchiare tutta la professionalità di chi lo sta dietro.manutenzione.css
Quando si entra in modalità Manutenzione nel nostro negozio online Prestashop, i nostri utenti vedranno quanto segue se stiamo utilizzando il tema predefinito:
Vediamo il contenuto di questo file:
*, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; margine: 35px automatico 0 automatico; imbottitura: 12px 0; sfondo: #fff; allineamento del testo: centro; trasformazione del testo: nessuno; font-weight: normale; spaziatura tra lettere: 0; colore: # C73178} #message {larghezza: 450 px; margine superiore: 35px; imbottitura: 12px 15px; bordo in alto: 1px punteggiato # 666; bordo-basso: 1px punteggiato # 666; sfondo: # F9E3EE; text-align: giustificare; carattere: 90% / 1em 'Lucida Grande', Verdana, sans-serif; trasformazione del testo: nessuno; font-weight: normale; spaziatura tra lettere: 0; color: # C73178} #message img {padding: 30px} Quando valutiamo il codice ci accorgiamo di avere 3 selettori grandi, che sono quelli che danno la struttura alla nostra pagina di manutenzione, vediamo ora l'immagine seguente per poter localizzare visivamente ogni selettore:
manutenzione.tpl
I file CSS di Prestashop file di controllo .tpl cosa sono i modelli? Smarty, l'uso dei modelli migliora e facilita il lavoro, per questo dobbiamo conoscere il modello manutenzione.tpl Vediamo il codice che lo comprende:
{$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}
{l s = 'In ***** per eseguire la manutenzione del sito, il nostro negozio online è stato messo temporaneamente offline. Ci scusiamo per l'inconveniente e ti chiediamo di riprovare più tardi! '}
Come vediamo ciascuno dei selettori del CSS è presente in questo file quindi ogni modifica che facciamo avrà effetto su questa sezione.
Ad esempio nella sezione messaggi:
Possiamo cambiarlo come segue:
Quindi possiamo modificare il CSS con quanto segue:
#manutenzione {larghezza: 750px; margine: 35px automatico 0 automatico; imbottitura: 12px 0; sfondo: #fefefe; allineamento del testo: centro; trasformazione del testo: nessuno; font-weight: grassetto; spaziatura tra lettere: 0; colore: # 3FCA66} #message {larghezza: 450px; margine superiore: 35px; imbottitura: 12px 15px; bordo in alto: 1px punteggiato # 666; bordo-basso: 1px punteggiato # 666; sfondo: # 2EE6F3; text-align: giustificare; carattere: 90% / 1em 'Lucida Grande', Verdana, sans-serif; trasformazione del testo: nessuno; font-weight: normale; spaziatura tra lettere: 0; color: # 000} #message img {padding: 10px} Con queste piccole modifiche che evidenziamo in grassetto, aggiunte alla modifica effettuata nel template .tpl, possiamo ottenere qualcosa di simile alla seguente immagine:
Con questo finiamo il tutorial e con questo otteniamo la conoscenza di come modificare la nostra pagina di manutenzione e con la quale i nostri clienti sapranno che quando non siamo in onda, la nostra qualità sarà la stessa.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
