PrestaShop knopkleur aanpassen: gebruik custom.css in plaats van theme.css te bewerken

Waar voeg je de kleur toe zodat hij niet verdwijnt?

In custom.css van het actieve thema, en bij een gekocht thema het liefst in een child theme. Kijk voordat je bestanden opent naar de thema-instellingen in de backoffice. Veel gekochte thema’s hebben een eigen configuratiemodule met een keuze aan kleuren voor knoppen en koppen. Dan kost de wijziging een paar klikken en heb je geen CSS nodig. Het thema Classic heeft zulke instellingen niet. Elke plek waar je de wijziging kunt doen, heeft andere gevolgen.

De volgorde waarin stijlbladen worden geladen, staat beschreven in de documentatie over het beheer van thema-assets. Zijn je themawijzigingen al eens na een update verdwenen, lees dan wat te doen als een thema-update je wijzigingen heeft gewist.

Hoe pas je een knopkleur stap voor stap aan?

Je hebt toegang tot de themabestanden nodig via FTP of het bestandsbeheer van je host.

1. Open een productpagina en zoek de class van de knop op in de browsertools (rechtsklik, Inspecteren).
2. Open het bestand assets/css/custom.css in de map van het actieve thema.
3. Voeg een regel toe voor de knop en een aparte voor de hover-status.
4. Sla het bestand op, en bewaar er eerst een kopie van.
5. Leeg de cache in Geavanceerde parameters > Prestaties.
6. Controleer de productpagina in een privévenster en op een telefoon.

In het thema Classic heeft de knop In winkelwagen de class add-to-cart. De regel kan er zo uitzien:

.product-add-to-cart .add-to-cart {
  background-color: #2e7d32;
  color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
  background-color: #1b5e20;
}

De hover-status staat beschreven bij MDN onder de selector :hover. Telefoons hebben die niet, dus de basiskleur moet op zichzelf werken.

Hoe wijzig je de kleuren van andere elementen in de webshop?

Op dezelfde manier, met een regel in custom.css, maar met een andere class. Hieronder classes uit het thema Classic. In een gekocht thema kunnen de namen verschillen, dus controleer ze altijd in de browsertools.

Wijzig één element tegelijk en controleer de pagina na elke wijziging. Meerdere wijzigingen tegelijk maken het moeilijk de wijziging te vinden die iets stuk heeft gemaakt. Zet ook een korte opmerking in het bestand met wat je hebt gewijzigd en wanneer. Over een half jaar vind je de regel die je moet aanpassen dan makkelijker terug.

Een volledige wijziging van het kleurenpalet van het thema, bijvoorbeeld alle tinten groen tegelijk, is meestal werk aan de bronbestanden van het thema en een rebuild. Dat doet meestal een ontwikkelaar of de maker van het thema.

Hoe kies je een kleur die leesbaar is?

Controleer het contrast tussen de knoptekst en de achtergrond voordat je de wijziging opslaat. Voor normale tekst raden de toegankelijkheidsrichtlijnen een contrast van minstens 4,5 op 1 aan, zoals het W3C uitlegt bij het contrastcriterium. Je kunt een kleur controleren in de WebAIM Contrast Checker door de codes van achtergrond en tekst in te vullen.

Zondag, 20:30, en je wijzigt het groen in het bestand voor de derde keer, leegt de cache en ververst de pagina. De felle merkkleur ziet er in het logo goed uit, maar witte tekst erop valt weg. Een donkerdere tint van dezelfde kleur helpt meestal.

Waarom zie je de nieuwe kleur niet?

Meestal door de cache of een regel die te zwak is. Controleer achtereenvolgens:

• Heb je de cache in de backoffice geleegd en de pagina ververst zonder browsercache?
• Heb je custom.css in het actieve thema bewerkt, niet in het hoofdthema?
• Is de regel van het thema specifieker dan de jouwe? Voeg dan een bovenliggende class aan je selector toe.

Meer over de lagen van caching vertellen we in het bericht wijzigingen niet zichtbaar in PrestaShop.

Hoe pas je de knopkleur aan met de chat?

Je geeft de kleur en de knop. Je chat (Claude of ChatGPT) vindt het stijlblad, toont de regel die hij toevoegt en slaat die op na jouw goedkeuring, met een kopie van het bestand.