Underhåll CSS i Prestashop

Underhållssidan för en webbplats är en mycket viktig aspekt, eftersom det finns tillfällen då vi av olika skäl (leverantörsproblem, uppdatering av källkod, ikraftträdande av nya kommersiella bestämmelser) där vi tillfälligt måste stänga av vår sida, vad användaren och den potentiella klienten måste återspegla all professionalism hos personen bakom.
underhåll. css
När du går in i läget underhåll i vår webbutik Prestashopkommer våra användare att se följande om vi använder standardtemat:

Detta är långt ifrån något personligt, men tack vare filen maintenance.css kan vi ändra och anpassa den så att den överensstämmer med vår bild.
Låt oss se innehållet i den här filen:

 *, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; marginal: 35px auto 0 auto; vaddering: 12px 0; bakgrund: #fff; text-align: center; text-transform: ingen; font-weight: normal; bokstavsavstånd: 0; färg: # C73178} #message {bredd: 450px; marginal-topp: 35px; vaddering: 12px 15px; border-top: 1px prickad # 666; kant-botten: 1px prickad # 666; bakgrund: # F9E3EE; text-align: motivera; typsnitt: 90% / 1em 'Lucida Grande', Verdana, sans-serif; text-transform: ingen; font-weight: normal; bokstavsavstånd: 0; färg: # C73178} #message img {padding: 30px} 

När vi utvärderar koden inser vi att vi har tre stora väljare, som är de som ger strukturen till vår underhållssida, låt oss nu se följande bild för att visuellt kunna hitta varje väljare:

Vi märker att väljaren #underhåll är den allmänna behållare inom vilken vi har #message img som reglerar bilden av budskapet och sedan har vi #meddelande vilket är texten med meddelandet som vi vill visa.
maintenace.tpl
Filerna CSS av Prestashop kontrollfiler .tpl vad är mallar Smart, användningen av mallar förbättrar och underlättar arbetet, för detta måste vi kunna mallen maintenance.tpl Låt oss se koden som förstår den:

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


{l s = 'I ***** för att utföra webbplatsunderhåll har vår webbutik tillfälligt tagits offline. Vi ber om ursäkt för besväret och ber dig att försöka igen senare! '}

Som vi ser var och en av väljarna av CSS den finns i den här filen så att varje ändring vi gör kommer att påverka detta avsnitt.
Till exempel i meddelandesektionen:

{l s = 'I ***** för att utföra webbplatsunderhåll har vår webbutik tillfälligt tagits offline. Vi ber om ursäkt för besväret och ber dig att försöka igen senare! '}

Vi kan ändra det till följande:

{l s = 'Denna webbplats är under underhåll. Vänligen kontakta följande ABC Store Online Limited 33 W. 111 Street, New York, NY 10001, USA Telefon: (212) 210-2100 '}

Sedan kan vi ändra CSS med följande:

 #underhåll {bredd: 750px; marginal: 35px auto 0 auto; vaddering: 12px 0; bakgrund: #fefefe; text-align: center; text-transform: ingen; font-weight: fet; bokstavsavstånd: 0; färg: # 3FCA66} #message {bredd: 450px; marginal-topp: 35px; vaddering: 12px 15px; border-top: 1px prickad # 666; kant-botten: 1px prickad # 666; bakgrund: # 2EE6F3; text-align: motivera; typsnitt: 90% / 1em 'Lucida Grande', Verdana, sans-serif; text-transform: ingen; font-weight: normal; bokstavsavstånd: 0; färg: # 000} #message img {padding: 10px} 

Med dessa små ändringar som vi markerar med fet stil, läggs till ändringen som gjorts i .tpl -mallen, kan vi uppnå något som liknar följande bild:

När vi ser detta kraftfulla verktyg tillsammans med vår kreativitet hjälper oss att uppnå ganska intressanta resultat.
Med detta avslutar vi handledningen och med detta får vi kunskapen om hur vi kan ändra vår underhållssida och med vilka våra kunder kommer att veta att när vi inte är i luften kommer vår kvalitet att vara densamma.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng