✅ CSS uzturēšana Prestashop

Satura rādītājs

Vietnes apkopes lapa ir ļoti svarīgs aspekts, jo dažos gadījumos dažādu iemeslu dēļ (piegādātāja problēmas, pirmkoda atjaunināšana, jaunu komerciālo noteikumu stāšanās spēkā) mums uz laiku ir jāaptur mūsu lapa, tomēr lietotāja un potenciālā klienta redzamībai jāatspoguļo visa aiz tā esošās personas profesionalitāte.
apkope.css
Ieejot režīmā apkope mūsu tiešsaistes veikalā Prestashop, ja mēs izmantojam noklusējuma motīvu, mūsu lietotāji redzēs sekojošo:

Tas nebūt nav kaut kas personalizēts, tomēr, pateicoties uzturēšanai.css, mēs varam to modificēt un pielāgot, lai tas atbilstu mūsu attēlam.
Apskatīsim šī faila saturu:

 *, body {margin: 0; polsterējums: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; mala: 35 pikseļi auto 0 auto; polsterējums: 12px 0; fons: #fff; text-align: center; text-transform: nav; fonta svars: normāls; atstarpes starp burtiem: 0; krāsa: # C73178} #ziņojums {platums: 450 pikseļi; augšējā mala: 35 pikseļi; polsterējums: 12 pikseļi 15 pikseļi; border-top: 1px punktots # 666; robeža apakšā: 1px punktēta # 666; fons: # F9E3EE; text-align: attaisnot; fonts: 90% / 1em 'Lucida Grande', Verdana, bez serifa; text-transform: nav; fonta svars: normāls; atstarpes starp burtiem: 0; krāsa: # C73178} #message img {padding: 30px}

Novērtējot kodu, mēs saprotam, ka mums ir 3 lieli atlasītāji, kas nodrošina mūsu apkopes lapas struktūru, tagad redzēsim šādu attēlu, lai vizuāli varētu atrast katru atlasītāju:

Mēs pamanām, ka atlasītājs #apkope ir vispārējais konteiners, kurā mēs atrodamies #ziņa img kas regulē ziņas tēlu un tad mums ir #ziņojums kas ir teksts ar ziņojumu, kuru vēlamies parādīt.
maintenace.tpl
Faili CSS no Prestashop kontroles failus .tpl kas ir veidnes Gudrs, veidņu izmantošana uzlabo un atvieglo darbu, tāpēc mums ir jāzina veidne apkope.tpl Apskatīsim kodu, kas to saprot:

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


{l s = 'Lai ***** veiktu vietnes apkopi, mūsu tiešsaistes veikals uz laiku tika izslēgts bezsaistē. Atvainojamies par sagādātajām neērtībām un lūdzam vēlāk mēģināt vēlreiz! '}

Kā mēs redzam katru no CSS tā ir šajā failā, tāpēc visas mūsu veiktās izmaiņas ietekmēs šo sadaļu.
Piemēram, ziņojumu sadaļā:

{l s = '***** Lai veiktu vietnes apkopi, mūsu tiešsaistes veikals uz laiku tika izslēgts bezsaistē. Atvainojamies par sagādātajām neērtībām un lūdzam vēlāk mēģināt vēlreiz! '}

Mēs varam to mainīt uz šādu:

{l s = 'Šī vietne tiek apkopta. Lūdzu, sazinieties ar šādu ABC Store Online Limited 33 W. 111 Street, Ņujorka, NY 10001, ASV Tālrunis: (212) 210-2100 '}

Tad mēs varam mainīt CSS ar sekojošo:

 #apkope {platums: 750px; mala: 35 pikseļi auto 0 auto; polsterējums: 12px 0; fons: #fefefe; text-align: center; text-transform: nav; fonta svars: treknraksts; atstarpes starp burtiem: 0; krāsa: # 3FCA66} # ziņojums {platums: 450 pikseļi; augšējā mala: 35 pikseļi; polsterējums: 12 pikseļi 15 pikseļi; border-top: 1px punktots # 666; robeža apakšā: 1px punktēta # 666; fons: # 2EE6F3; text-align: attaisnot; fonts: 90% / 1em 'Lucida Grande', Verdana, bez serifa; text-transform: nav; fonta svars: normāls; atstarpes starp burtiem: 0; krāsa: # 000} #message img {padding: 10px}

Ar šīm mazajām izmaiņām, kuras mēs izceļam treknrakstā, pievienojot .tpl veidnē veiktajām izmaiņām, mēs varam sasniegt kaut ko līdzīgu šim attēlam:

Kā mēs redzam, šis spēcīgais rīks kopā ar mūsu radošumu palīdz mums sasniegt diezgan interesantus rezultātus.
Ar to mēs pabeidzam apmācību un iegūstam zināšanas par to, kā mainīt mūsu apkopes lapu un ar ko mūsu klienti zinās, ka tad, kad nebūsim ēterā, mūsu kvalitāte būs tāda pati.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu