Vedlikehold CSS i Prestashop

Vedlikeholdssiden til et nettsted er et veldig viktig aspekt, siden det av ganger er forskjellige grunner (leverandørproblemer, oppdatering av kildekode, ikrafttredelse av nye kommersielle forskrifter) der vi imidlertid midlertidig må stanse siden hva bruker og potensiell klient se må gjenspeile all profesjonaliteten til personen som står bak.
vedlikehold.css
Når du går inn i modusen vedlikehold i vår nettbutikk Prestashop, vil brukerne våre se følgende hvis vi bruker standardtemaet:

Dette er langt fra noe personlig, men takket være filen maintenance.css kan vi endre og tilpasse den slik at den samsvarer med bildet vårt.
La oss se innholdet i denne filen:

 *, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; margin: 35px auto 0 auto; polstring: 12px 0; bakgrunn: #fff; tekstjustering: senter; tekst-transform: ingen; font-weight: normal; mellomrom mellom bokstaver: 0; farge: # C73178} #message {bredde: 450px; margin-top: 35px; polstring: 12px 15px; border-top: 1px prikket # 666; kant-bunn: 1px prikket # 666; bakgrunn: # F9E3EE; tekstjuster: begrunn; font: 90% / 1em 'Lucida Grande', Verdana, sans-serif; tekst-transform: ingen; font-weight: normal; mellomrom mellom bokstaver: 0; farge: # C73178} #message img {padding: 30px} 

Når vi evaluerer koden, innser vi at vi har 3 store velgere, som er de som gir strukturen til vår vedlikeholdsside. La oss nå se følgende bilde for å kunne finne hver velger visuelt:

Vi merker at velgeren #vedlikehold er den generelle beholderen vi har i #melding img som regulerer bildet av meldingen, og så har vi det #beskjed som er teksten med meldingen som vi ønsker å vise.
maintenace.tpl
Filene CSS av Prestashop kontrollfiler .tpl hva er maler Smarty, bruk av maler forbedrer og letter arbeidet, for dette må vi kjenne malen maintenance.tpl La oss se koden som forstår den:

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


{l s = 'I ***** for å utføre vedlikehold av nettstedet har nettbutikken vår blitt midlertidig frakoblet. Vi beklager ulempen, og ber om at du prøver igjen senere! '}

Som vi ser hver av velgerne til CSS den er tilstede i denne filen, så hver endring vi gjør vil ha en effekt på denne delen.
For eksempel i meldingsdelen:

{l s = 'I ***** for å utføre vedlikehold av nettstedet har nettbutikken vår blitt midlertidig frakoblet. Vi beklager ulempen, og ber om at du prøver igjen senere! '}

Vi kan endre det til følgende:

{l s = 'Dette nettstedet er under vedlikehold. Ta kontakt med følgende ABC Store Online Limited 33 W. 111 Street, New York, NY 10001, USA Telefon: (212) 210-2100 '}

Deretter kan vi endre CSS med følgende:

 #maintenance {bredde: 750px; margin: 35px auto 0 auto; polstring: 12px 0; bakgrunn: #fefefe; tekstjustering: senter; tekst-transform: ingen; font-weight: fet skrift; mellomrom mellom bokstaver: 0; farge: # 3FCA66} #message {bredde: 450px; margin-top: 35px; polstring: 12px 15px; border-top: 1px prikket # 666; kant-bunn: 1px prikket # 666; bakgrunn: # 2EE6F3; tekstjuster: begrunn; font: 90% / 1em 'Lucida Grande', Verdana, sans-serif; tekst-transform: ingen; font-weight: normal; mellomrom mellom bokstaver: 0; farge: # 000} #message img {padding: 10px} 

Med disse små endringene som vi markerer med fet skrift, lagt til endringen som er gjort i .tpl -malen, kan vi oppnå noe som ligner på følgende bilde:

Som vi ser, hjelper dette kraftige verktøyet sammen med vår kreativitet oss med å oppnå ganske interessante resultater.
Med dette fullfører vi opplæringen og med dette får vi kunnskapen om hvordan vi kan endre vår vedlikeholdsside og som våre kunder vil vite at når vi ikke er i luften, vil kvaliteten vår være den samme.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng