PrestaShop - Modificări de bază ale temei

Deși tema de bază implicită a PrestaShop Este destul de funcțional, un magazin nu poate merge online astfel, mai întâi pentru că riscăm ca un alt magazin să arate exact la fel și al doilea pentru că poate tema de bază conține lucruri de care nu avem nevoie sau sunt aranjate într-un mod care nu este conform la magazinul nostru.
Din acest motiv, personalizarea este modul în care urmăm întotdeauna fie prin plasarea unei teme noi, fie prin schimbarea celei existente, astfel încât dispunerea elementelor și a culorilor să poată fi diferită.
Primele modificări
Vom începe să facem modificări simple, dar foarte eficiente, care vor face ca tema să pară total diferită de modul în care este în mod implicit, pentru aceasta vom urma următorii pași:

• Vom schimba sigla, facem acest lucru de la administratorul back office, pentru aceasta vom încărca imaginea în secțiunea: Preferințe -> Aspect.
• Atunci trebuie să mergem la Back Office -> Module -> Instrumente -> Editor de acasă.
• Am înlocuit sigla centrală la configurarea modulului.

După acest început, vom schimba acum câteva elemente de poziție pentru un efect de personalizare mai mare:

• Schimbăm poziția blocului Categorie: în coloana din stânga.
• Dezactivăm produsele speciale.
• Modificăm informațiile din categorii.

Să vedem următoarea captură de ecran, astfel încât să putem examina modificările pe care le-am făcut, vom observa că unele lucruri au fost mutate de la dreapta la stânga și că alte coloane nu mai sunt acolo și, prin urmare, altele s-au ridicat în poziție:

Acum, tema implicită arată foarte diferită, dacă tot nu obținem un rezultat bun, nu vă faceți griji, deoarece este ceva nou și, ca atare, trebuie să exersăm puțin înainte de a deveni experți în domeniu.
Schimbarea CSS
O altă modificare foarte eficientă este modificarea fișierelor CSS cu care putem schimba, de exemplu, culoarea de fundal a magazinului.
În scopul acestui exemplu, vom folosi Firefox și instrumentele dvs. pentru dezvoltatori sau dacă preferați firebug.
Pentru a activa editarea fișierului CSS cu instrumentele pentru dezvoltatori, vom face clic dreapta pe magazin și selectăm opțiunea Inspectează elementul, apoi în meniul care apare vom selecta editor de stil.
Acum, dacă folosim firebug, spunem doar inspectarea elementului cu firebug și apoi mergem la fila CSS.
În fereastra care a apărut și o dată în secțiunea CSS vom localiza fișierul global.css și vom încerca să schimbăm codul din culoare de fundal.

 corp {fundal-culoare: [b] albastru [/ b]; dimensiunea fontului: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; culoare: # 5d717e; text-align: center} 

Datorită acestor instrumente, schimbarea se face în timp real și avem ocazia să o vizualizăm, astfel încât să vedem progresul nostru în acest moment:

După cum putem vedea, fundalul albastru este o schimbare foarte drastică, dar eficientă, evident că nu arată foarte bine, deoarece literele și celelalte elemente trebuie ajustate, totuși vedem ceea ce este important și este că o culoare simplă poate face o diferență.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv