Personalizations are built by different elements, each of which has a unique Class name. These Class names are ideal for when you want to take the Personalization to the next level and customize the style to your liking.
Example Use case
Suppose you want to use the countdown filter in a personalization that expires today:
Then the number of days will be 0:
'0 days' is then a bit redundant information, so it is understandable if you prefer not to show it. To accommodate this, we dynamically change the HTML element when the time frame is set to 0. That's where Class names come into play, but then you have to look them up first.
Looking up a Class name
In the browser, press “F12. In Google Chrome, then open DevTools:
Make sure the Elements tab is open:
Click on the following icon:
With the icon activated, you can inspect all elements on the web page. Click near the element you want to modify:
In the Elements tab, you will be referred to the next element:
There you will find all the Class names in the countdown. You can now address these with CSS.
Modifying a class name
Since we want to hide '0 days' when it is set to 0, we grab the Class name 'days_empty':
Then you go to Additional options:
And under CSS you can add the following code:
display:none; will then cause '0 days' to be hidden.