✅ Prestashop - De CSS aanpassen

Inhoudsopgave

Met de stylesheets of CSS We kunnen bijna alles bereiken in de webomgeving, de effecten die we bereiken worden toegepast op de hele site, waardoor de mogelijkheid wordt geboden om een homogene identiteit over de hele pagina te creëren.
gelukkig Prestashop Het is gebouwd met behulp van deze standaard, dus we kunnen het uiterlijk zeer snel wijzigen en als we de conventies volgen, kunnen we effecten bereiken die in onze hele winkel worden toegepast, waardoor onze grafische identiteit wordt gecreëerd.
De Prestashop CSS-bestanden kennen
Zoals altijd voordat we iets in onze winkel gaan wijzigen, moeten we eerst weten waar we staan, in dit geval moeten we ons vertrouwd maken met de structuur van Prestashop en waar kunnen we de verschillende bestanden krijgen CSS.
Als we de mappenstructuur van onze installatie van . openen Prestashop we moeten naar de map gaan thema's, hierin zullen de verschillende thema's beschikbaar zijn voor onze winkel, hierdoor kunnen we verschillende variaties van onze afbeelding hebben.
Het is altijd belangrijk om te onthouden dat als we wijzigingen gaan aanbrengen, we eerst een back-up van de gegevens moeten maken, hiervoor kunnen we de map van het thema kopiëren om het te wijzigen en het onder een andere naam op te slaan, op deze manier kunnen we terugkeren naar de vorige versie indien nodig.
Eenmaal in de map thema's en nadat we het te wijzigen thema al hebben ingevoerd, moeten we de map lokaliseren cssLaten we de volgende afbeelding bekijken om het pad te illustreren dat we moeten hebben afgelegd:

Heel goed, eenmaal in deze map moeten we de volgende bestanden hebben:

global.css
onderhoud.css
scenes.css

De bestanden CSS van Prestashop werken met de sjabloon-engine Smarty (.tpl) die zich standaard in de map modules bevindt, hoewel het niet strikt vereist is om met deze module te werken om deze grondig te kennen, maar het hebben van enkele noties kan ons veel helpen.
Een ander belangrijk aspect is om een beetje de syntaxis te kennen van CSSHoewel dit een beetje overweldigend kan zijn, is het erg belangrijk om te weten wat elk ding in ons bestand betekent, zodat we bewust kunnen handelen elke keer dat we een wijziging aanbrengen.
global.css
Dit is het algemene bestand waarmee we het algemene uiterlijk van alle pagina's van onze winkel kunnen wijzigen.
De aspecten die we kunnen controleren met dit bestand zijn de volgende:

Achtergrond kleur
Lettertypegrootte
Lettertype
Kleur
Tekstuitlijning
Alinea- en pagina-indeling

Zoals we kunnen zien, zijn deze aspecten essentieel in ons grafische beeld, dus dit bestand is van vitaal belang om de stroom van onze site te behouden.
Hoewel we veel wijzigingen kunnen aanbrengen, raden we aan om bij het starten de bestaande syntaxis, zo niet de waarden ervan, niet te wijzigen, zodat we het bestand kunnen gebruiken CSS als basis en om op deze manier te leren welke veranderingen optreden bij elke wijziging van de waarden die we maken.
We hebben al een basis om het uiterlijk van onze winkel aan te passen via de stijlbestanden en we weten ook al dat er andere concepten zijn die we moeten onderzoeken en leren om professionelere resultaten te bereiken.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