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. Helaas is er geen standaard optie in Squeezely om deze makkelijk en snel te verbergen. 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 op je ‘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 verwijst 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 het aantal dagen 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 verbergt.