✅ CSS priežiūra „Prestashop“

Turinys

Svetainės priežiūros puslapis yra labai svarbus aspektas, nes yra atvejų, kai dėl įvairių priežasčių (tiekėjo problemos, šaltinio kodo atnaujinimas, naujų komercinių taisyklių įsigaliojimas) turime laikinai sustabdyti savo puslapį, tačiau ką vartotojas ir potencialus klientas mato, turi atspindėti visą už jo esančio asmens profesionalumą.
priežiūra.css
Įeinant į režimą priežiūra mūsų internetinėje parduotuvėje Prestashop, jei naudotume numatytąją temą, mūsų vartotojai matys šiuos dalykus:

Tai toli gražu nėra kažkas suasmeninto, tačiau failo maintenance.css dėka galime jį modifikuoti ir pritaikyti, kad jis atitiktų mūsų įvaizdį.
Pažiūrėkime šio failo turinį:

 *, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; paraštė: 35px auto 0 auto; paminkštinimas: 12px 0; fonas: #fff; text-align: centre; text-transform: none; šrifto svoris: normalus; tarpas tarp raidžių: 0; spalva: # C73178} # pranešimas {plotis: 450 taškų; viršutinė paraštė: 35 taškų; paminkštinimas: 12px 15px; border-top: 1px taškuotas # 666; kraštinė-apačia: 1px punktyrinis # 666; fonas: # F9E3EE; text-align: teisinti; šriftas: 90% / 1em 'Lucida Grande', Verdana, be serifo; text-transform: none; šrifto svoris: normalus; tarpas tarp raidžių: 0; spalva: # C73178} #message img {padding: 30px}

Vertindami kodą suprantame, kad turime 3 didelius selektorius, kurie suteikia mūsų priežiūros puslapio struktūrą, dabar pažiūrėkime šį vaizdą, kad galėtume vizualiai rasti kiekvieną parinkiklį:

Pastebime, kad selektorius #priežiūra yra bendras konteineris, kuriame mes turime #žinutė img kad reguliuoja pranešimo įvaizdį ir tada mes turime #pranešimas tai tekstas su pranešimu, kurį norime parodyti.
maintenace.tpl
Failai CSS apie Prestashop valdymo failus .tpl kas yra šablonai Protingas, šablonų naudojimas pagerina ir palengvina darbą, tam mes turime žinoti šabloną priežiūra.tpl Pažiūrėkime kodą, kuris jį supranta:

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


{l s = '***** Norėdami atlikti svetainės priežiūrą, mūsų internetinė parduotuvė laikinai buvo išjungta neprisijungus. Atsiprašome už nepatogumus ir prašome vėliau bandyti dar kartą! '}

Kaip matome kiekvienas iš CSS jis yra šiame faile, todėl kiekvienas mūsų atliktas pakeitimas turės įtakos šiam skyriui.
Pavyzdžiui, pranešimų skiltyje:

{l s = '***** Norėdami atlikti svetainės priežiūrą, mūsų internetinė parduotuvė laikinai buvo išjungta neprisijungus. Atsiprašome už nepatogumus ir prašome vėliau bandyti dar kartą! '}

Mes galime jį pakeisti taip:

{l s = 'Ši svetainė yra prižiūrima. Prašome susisiekti su šiuo „ABC Store Online Limited“ 33 W. 111 Street, Niujorkas, NY 10001, JAV Telefonas: (212) 210-2100 '}

Tada galime pakeisti CSS su šiais:

 #priežiūra {plotis: 750 taškų; paraštė: 35px auto 0 auto; paminkštinimas: 12px 0; fonas: #fefefe; text-align: centre; text-transform: none; šrifto svoris: paryškintas; tarpas tarp raidžių: 0; spalva: # 3FCA66} # pranešimas {plotis: 450 taškų; viršutinė paraštė: 35 taškų; paminkštinimas: 12px 15px; border-top: 1px taškuotas # 666; kraštinė-apačia: 1px punktyrinis # 666; fonas: # 2EE6F3; text-align: teisinti; šriftas: 90% / 1em 'Lucida Grande', Verdana, be serifo; text-transform: none; šrifto svoris: normalus; tarpas tarp raidžių: 0; spalva: # 000} #message img {padding: 10px}

Šiais mažais pakeitimais, kuriuos paryškiname paryškintu šriftu, pridedame prie .tpl šablone atlikto pakeitimo, galime pasiekti kažką panašaus į šį vaizdą:

Kaip matome, šis galingas įrankis kartu su mūsų kūrybiškumu padeda pasiekti gana įdomių rezultatų.
Baigę pamoką, įgysime žinių, kaip pakeisti techninės priežiūros puslapį ir su kuriuo mūsų klientai žinos, kad kai mūsų nebus eteryje, mūsų kokybė bus ta pati.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką