Inhaltsverzeichnis
Die Wartungsseite einer Site ist ein sehr wichtiger Aspekt, da es Zeiten gibt, in denen wir aus verschiedenen Gründen (Lieferantenprobleme, Quellcode-Update, Inkrafttreten neuer kommerzieller Vorschriften) unsere Seite vorübergehend aussetzen müssen, was die Benutzer und potenzieller Kunde sehen muss die ganze Professionalität der Person, die dahinter steht, widerspiegeln.Wartung.css
Beim Aufrufen des Modus Wartung in unserem Online-Shop Prestashop, sehen unsere Benutzer Folgendes, wenn wir das Standarddesign verwenden:
Sehen wir uns den Inhalt dieser Datei an:
*, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; Rand: 35px Auto 0 Auto; Polsterung: 12px 0; Hintergrund: #fff; Textausrichtung: Mitte; Texttransformation: keine; Schriftstärke: normal; Buchstabenabstand: 0; Farbe: # C73178} #Nachricht {Breite: 450px; Rand oben: 35px; Polsterung: 12px 15px; Rand oben: 1px gepunktet # 666; Rand-unten: 1px gepunktet # 666; Hintergrund: # F9E3EE; text-align: ausrichten; Schriftart: 90% / 1em 'Lucida Grande', Verdana, serifenlos; Texttransformation: keine; Schriftstärke: normal; Buchstabenabstand: 0; Farbe: # C73178} #message image {padding: 30px} Bei der Auswertung des Codes stellen wir fest, dass wir 3 große Selektoren haben, die unserer Wartungsseite die Struktur geben. Sehen wir uns nun das folgende Bild an, um jeden Selektor visuell zu finden:
maintenace.tpl
Die Dateien CSS von Prestashop Steuerdateien .tpl Was sind Vorlagen? Smarty, die Verwendung von Vorlagen verbessert und erleichtert die Arbeit, dafür müssen wir die Vorlage kennen Wartung.tpl Sehen wir uns den Code an, der es versteht:
{$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}
{l s = 'In *****, um die Website-Wartung durchzuführen, wurde unser Online-Shop vorübergehend vom Netz genommen. Wir entschuldigen uns für die Unannehmlichkeiten und bitten Sie, es später noch einmal zu versuchen! '}
Wie wir sehen, ist jeder der Selektoren der CSS es ist in dieser Datei vorhanden, sodass sich jede Änderung, die wir vornehmen, auf diesen Abschnitt auswirkt.
Zum Beispiel im Nachrichtenbereich:
Wir können es wie folgt ändern:
Dann können wir das ändern CSS mit den folgenden:
#Wartung {Breite: 750px; Rand: 35px Auto 0 Auto; Polsterung: 12px 0; Hintergrund: #fefefe; Textausrichtung: Mitte; Texttransformation: keine; Schriftdicke: fett; Buchstabenabstand: 0; Farbe: # 3FCA66} #Nachricht {Breite: 450px; Rand oben: 35px; Polsterung: 12px 15px; Rand oben: 1px gepunktet # 666; Rand-unten: 1px gepunktet # 666; Hintergrund: # 2EE6F3; text-align: ausrichten; Schriftart: 90% / 1em 'Lucida Grande', Verdana, serifenlos; Texttransformation: keine; Schriftstärke: normal; Buchstabenabstand: 0; Farbe: # 000} #message image {padding: 10px} Mit diesen kleinen Änderungen, die wir in Fettdruck hervorheben und die in der .tpl-Vorlage vorgenommen wurden, können wir etwas Ähnliches wie in der folgenden Abbildung erreichen:
Damit beenden wir das Tutorial und erhalten damit das Wissen, wie unsere Wartungsseite geändert werden kann und mit dem unsere Kunden wissen, dass unsere Qualität, wenn wir nicht auf Sendung sind, gleich sein wird.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
