Onderhoud CSS in Prestashop

De onderhoudspagina van een site is een zeer belangrijk aspect, aangezien er momenten zijn waarop we om verschillende redenen (problemen met de leverancier, update broncode, inwerkingtreding van nieuwe commerciële regelgeving) onze pagina tijdelijk moeten opschorten, maar wat de gebruiker en potentiële klant zien moet alle professionaliteit van de persoon erachter weerspiegelen.
onderhoud.css
Bij het betreden van de modus onderhoud in onze online winkel Prestashop, zullen onze gebruikers het volgende zien als we het standaardthema gebruiken:

Dit is verre van iets persoonlijks, maar dankzij het maintenance.css-bestand kunnen we het aanpassen en aanpassen, zodat het overeenkomt met onze afbeelding.
Laten we eens kijken naar de inhoud van dit bestand:

 *, body {marge: 0; padding: 0} body {font-familie: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #onderhoud {breedte: 450px; marge: 35px auto 0 auto; opvulling: 12px 0; achtergrond: #fff; tekst uitlijnen: midden; teksttransformatie: geen; lettergewicht: normaal; letterafstand: 0; kleur: # C73178} #bericht {breedte: 450px; marge-top: 35px; opvulling: 12px 15px; border-top: 1px gestippeld # 666; border-bottom: 1px gestippeld # 666; achtergrond: # F9E3EE; text-align: uitvullen; lettertype: 90% / 1em 'Lucida Grande', Verdana, schreefloos; teksttransformatie: geen; lettergewicht: normaal; letterafstand: 0; kleur: # C73178} #message img {padding: 30px} 

Bij het evalueren van de code realiseren we ons dat we 3 grote selectors hebben, die de structuur geven aan onze onderhoudspagina. Laten we nu de volgende afbeelding bekijken om elke selector visueel te kunnen lokaliseren:

We merken dat de selector #onderhoud is de algemene container waarbinnen we hebben #bericht afbeelding dat regelt het beeld van de boodschap en dan hebben we #bericht dat is de tekst met het bericht dat we willen laten zien.
onderhoud.tpl
De bestanden CSS van Prestashop controle bestanden .tpl wat zijn sjablonen Smarty, het gebruik van sjablonen verbetert en vergemakkelijkt het werk, hiervoor moeten we de sjabloon kennen onderhoud.tpl Laten we eens kijken naar de code die het begrijpt:

 {$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}


{l s = 'In ***** voor het uitvoeren van site-onderhoud is onze online winkel tijdelijk offline gehaald. Onze excuses voor het ongemak en we vragen u het later opnieuw te proberen! '}

Zoals we zien bij elk van de selectors van de CSS het is aanwezig in dit bestand, dus elke wijziging die we maken heeft een effect op deze sectie.
Bijvoorbeeld in het berichtgedeelte:

{l s = 'In ***** voor het uitvoeren van site-onderhoud is onze online winkel tijdelijk offline gehaald. Onze excuses voor het ongemak en we vragen u het later opnieuw te proberen! '}

We kunnen het veranderen in het volgende:

{l s = 'Deze site is in onderhoud. Neem contact op met de volgende ABC Store Online Limited 33 W. 111 Street, New York, NY 10001, VS Telefoon: (212) 210-2100 '}

Dan kunnen we de wijzigen CSS met het volgende:

 #onderhoud {breedte: 750px; marge: 35px auto 0 auto; opvulling: 12px 0; achtergrond: #fefefe; tekst uitlijnen: midden; teksttransformatie: geen; lettergewicht: vet; letterafstand: 0; kleur: # 3FCA66} #bericht {breedte: 450px; marge-top: 35px; opvulling: 12px 15px; border-top: 1px gestippeld # 666; border-bottom: 1px gestippeld # 666; achtergrond: # 2EE6F3; text-align: uitvullen; lettertype: 90% / 1em 'Lucida Grande', Verdana, schreefloos; teksttransformatie: geen; lettergewicht: normaal; letterafstand: 0; kleur: # 000} #message img {padding: 10px} 

Met deze kleine wijzigingen die we vetgedrukt markeren, toegevoegd aan de wijziging in de .tpl-sjabloon, kunnen we iets bereiken dat lijkt op de volgende afbeelding:

Zoals we zien, helpt deze krachtige tool ons samen met onze creativiteit om behoorlijk interessante resultaten te bereiken.
Hiermee voltooien we de tutorial en krijgen we de kennis over hoe we onze onderhoudspagina kunnen wijzigen en waarmee onze klanten weten dat wanneer we niet in de lucht zijn, onze kwaliteit hetzelfde zal zijn.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven