Customize the countdown timer appearance
Take control of which elements to show, and change countdown timer look and feel to match your site design.
To set custom units labels, navigate to Appearance > Elements > Timer Label:
You can change countdown timer look and feel and see render live.
Under Appearance > Elements, you can customize every element style:
Time block provide different set of controls to fully customize the countdown timer look and feel:
Navigate to Appearance > Elements > Timer block.
In the option Display, select Inline:
Navigate to Appearance > Elements > General:
In the option Display, select Inline:
To add your custom CSS code, in your campaign settings, go to Appearance → Custom CSS:
Here're the CSS class selectors you can use to customize the style and size of the campaign's elements:
CSS class selectors
IMPORTANT: Add
.hurrytimer-campaign before classes and tags you want to target, example: .hurrytimer-campaign .hurrytimer-timer-digit
{
font-size: 2em;
}If you're displaying your campaign in a sticky bar, use these class selectors to target the sticky bar's elements:
.hurrytimer-sticky: The sticky bar..hurrytimer-sticky-close: The close button.
Use these media queries to apply CSS to a specific screen size:
For mobile:
@media screen and (max-width: 540px) {
/* your css code for mobile goes here */
}
Example: Make the countdown timer digits and labels smaller on mobile:
@media screen and (max-width: 540px) {
.hurrytimer-campaign .hurrytimer-timer-digit{
font-size: 15px;
}
.hurrytimer-campaign .hurrytimer-timer-label{
font-size: 12px;
}
}
For tablets:
@media screen and (min-width: 540px) and (max-width: 780px) {
/* your css code for tablets goes here */
}
In order to render the countdown timer units from right to left for languages such Arabic and Hebrew, use the property
direction: rtlas below:.hurrytimer-campaign{
direction: rtl;
}