PrestaShop - Basisthemawijzigingen

Hoewel het standaard basisthema van PrestaShop Het is best functioneel, een winkel kan op die manier niet online gaan, ten eerste omdat we het risico lopen dat een andere winkel er precies hetzelfde uitziet en ten tweede omdat het basisthema misschien dingen bevat die we niet nodig hebben of zijn gerangschikt op een manier die niet past naar onze winkel.
Om deze reden is personalisatie de manier waarop we altijd volgen, hetzij door een nieuw thema te plaatsen of door het bestaande te wijzigen, zodat de opstelling van de elementen en de kleuren anders kunnen zijn.
Eerste wijzigingen
We gaan beginnen met het maken van eenvoudige maar zeer effectieve wijzigingen waardoor het thema er totaal anders uitziet dan het standaard is, hiervoor gaan we de volgende stappen volgen:

• We gaan het logo veranderen, dit doen we vanuit de beheerder van de backoffice, hiervoor gaan we de afbeelding uploaden in de sectie: Voorkeuren -> Uiterlijk.
• Dan moeten we naar Backoffice -> Modules -> Hulpmiddelen -> Hoofdredacteur.
• Bij het configureren van de module hebben we het centrale logo vervangen.

Na deze start gaan we nu enkele positie-elementen wijzigen voor een groter aanpassingseffect:

• We veranderen de positie van het blok Categorie: in de linkerkolom.
• We schakelen speciale producten uit.
• We veranderen de informatie in categorieën.

Laten we de volgende schermafbeelding bekijken, zodat we de wijzigingen die we hebben aangebracht kunnen bekijken, we zullen opmerken dat sommige dingen van rechts naar links zijn verplaatst en dat andere kolommen er niet meer zijn en daarom andere kolommen in positie zijn gestegen:

Nu ziet het standaardthema er heel anders uit, als we nog steeds geen goed resultaat krijgen, maak je dan geen zorgen, want het is iets nieuws en als zodanig moeten we een beetje oefenen voordat we experts in het veld worden.
De CSS wijzigen
Een andere verandering die zeer effectief is, is het wijzigen van de bestanden CSS waarmee we bijvoorbeeld de achtergrondkleur van de winkel kunnen veranderen.
Voor de doeleinden van dit voorbeeld gaan we gebruiken Firefox en uw ontwikkelaarstools of als u de voorkeur geeft aan de vuurwants.
Om het bewerken van de . te activeren CSS met de ontwikkelaarstools gaan we gewoon met de rechtermuisknop op de winkel klikken en de optie selecteren Inspecteer element, dan selecteren we in het menu dat verschijnt stijleditor.
Als we nu gebruiken vuurwants, we zeggen gewoon inspecteer element met firebug en dan gaan we naar het CSS-tabblad.
In het venster dat is verschenen en eenmaal in de CSS-sectie gaan we het bestand lokaliseren global.css en we zullen proberen de code te wijzigen van Achtergrond kleur.

 body {achtergrondkleur: [b] blauw [/ b]; lettergrootte: 11px; font-familie: Verdana, Arial, Helvetica, Sans-Serif; kleur: # 5d717e; tekst uitlijnen: centreren} 

Dankzij deze tools wordt de wijziging in realtime doorgevoerd en hebben we de mogelijkheid om deze te visualiseren, zodat we onze voortgang op het moment kunnen zien:

Zoals we kunnen zien, is de blauwe achtergrond een zeer drastische verandering, maar effectief, het ziet er natuurlijk niet erg goed uit omdat de letters en andere elementen moeten worden aangepast, maar we zien het belangrijkste en het is dat een eenvoudige kleur een verschil.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven