Inhoudsopgave
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:
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:
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:
We kunnen het veranderen in het volgende:
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:
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
