Class namen opzoeken en aanpassen in Personalisaties
- Dave Kok
- Arno Van Laerhoven (Deactivated)
Personalisaties zijn opgebouwd door verschillende elementen die elk een unieke Class naam hebben. Deze Class namen zijn ideaal voor wanneer je de Personalisatie naar een hoger niveau wil brengen en de stijl naar wens wilt aanpassen.
Voorbeeld use case
Stel dat je de countdown filter wilt gebruiken in een personalisatie die vandaag nog verloopt:
Dan zal het aantal dagen op 0 staan:
'0 days' is dan een beetje redundante informatie, dus het is begrijpelijk als je deze liever niet toont. Om dit op te vangen wijzigen we dynamisch het HTML element wanneer het tijdsbestek op 0 staat. Dat is waar Class namen in het spel komen, maar dan moet je deze eerst opzoeken.
Opzoeken van een Class naam
In de browser druk je op ‘F12’. In Google Chrome open je dan de DevTools:
Zorg dat het tabblad Elements geopend is:
Klik op het volgende icoontje:
Met het icoontje geactiveerd, kan je alle elementen op de webpagina inspecteren. Klik in de buurt van het element dat je wilt aanpassen:
In het tabblad Elements zal je verwezen worden naar het volgende element:
Daar vind je alle Class namen in de countdown. Deze kan je nu aanspreken met CSS.
Aanpassen van een Class naam
Aangezien we ‘0 days’ willen verbergen als deze op 0 staat, pakken we de Class naam ‘days_empty':
Dan ga je naar Additional options:
En bij CSS kan je de volgende code toevoegen:
display:none; zal er dan voor zorgen dat ‘0 days’ wordt verborgen.