# Customize the countdown timer appearance

### Set custom units labels

To set custom units labels, navigate to Appearance > Elements >  Timer Label:

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-MVTTCLpsTTuHn3aTi24%2F-MVTTHxUTvMSJz1ugHIs%2FScreen%20Shot%202021-03-11%20at%2012.29.04%20AM.jpg?alt=media\&token=759de067-bc43-4b6d-bfd5-0b502eaff6de)

### Customize countdown timer look and feel

You can change countdown timer look and feel and see render live. 

Under Appearance > Elements, you can customize every element style:

#### Timer digits

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-LrKJ2Tl2HxMPV-G9ipV%2F-LrKUdll9JGeInetV6dZ%2FScreen%20Shot%202019-10-16%20at%205.54.54%20PM.png?alt=media\&token=808b6073-97f3-4770-88dd-4d5bef358b02)

#### Timer labels

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-LrKJ2Tl2HxMPV-G9ipV%2F-LrKUq3q2mRtNmFTuT5y%2FScreen%20Shot%202019-10-16%20at%205.55.45%20PM.png?alt=media\&token=1dd8275b-67bc-4cc8-b582-74f34c21c510)

#### Timer blocks

Time block provide different set of controls to fully customize the countdown timer look and feel:

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-LrKJ2Tl2HxMPV-G9ipV%2F-LrKVcZjLe_L0SeQYeX2%2FScreen%20Shot%202019-10-16%20at%205.59.08%20PM.png?alt=media\&token=1e073d86-5e3f-48bf-8c45-57804e992970)

### Display the timer digit and label horizontally

Navigate to Appearance > Elements > Timer block**.**

In the option **Display**, select **Inline:**

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-LrKXRfsg5SmM7xRGjI8%2F-LrKYwxjLEJ7Fsrppaen%2FScreen-Shot-2019-06-08-at-2.59.35-PM.png?alt=media\&token=f4a57278-eb61-42cb-9b4f-7a38346f3c36)

### Display the countdown timer on the same line as the content

Navigate to Appearance > Elements > General:

In the option **Display**, select **Inline:**

![](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-LrKXRfsg5SmM7xRGjI8%2F-LrKZArtXstgWd3Jzg71%2FScreen-Shot-2019-06-08-at-2.49.18-PM.png?alt=media\&token=b73eb228-72fa-43c0-bffc-fe248bad7798)

### Add custom CSS

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](https://1703849401-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm_rZfM-dEfD2qmxVDD%2F-Mbx1zoT5sEDgQkkJ25x%2F-Mbx2Peu87qDshJpG3JB%2Fcss-classes.jpg?alt=media\&token=f0db55bf-a395-4c69-98b0-85b55e7c2948)

{% hint style="danger" %}
**IMPORTANT**: Add`.hurrytimer-campaign` before classes and tags you want to target, example: `.hurrytimer-campaign .hurrytimer-timer-digit`\
`{` \
   `font-size: 2em;` \
`}`
{% endhint %}

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.

#### Apply customization  only for mobile devices

Use these media queries to apply CSS to a specific screen size:

**For mobile:**

```css
@media screen and (max-width: 540px) {
    /* your css code for mobile goes here */
}
```

**Example:** Make the countdown timer digits and labels smaller on mobile:

```css
@media screen and (max-width: 540px) {

    .hurrytimer-campaign .hurrytimer-timer-digit{
        font-size: 15px;
    }
    
     .hurrytimer-campaign .hurrytimer-timer-label{
        font-size: 12px;
    }
    
}
```

**For tablets:**

```css
@media screen and (min-width: 540px) and (max-width: 780px) {
   /* your css code for tablets goes here */
}
```

#### Render countdown timer from right-to-left (RTL)

In order to render the countdown timer units from right to left for languages such Arabic and Hebrew, use the property  `direction: rtl`as below:

```css
.hurrytimer-campaign{
    direction: rtl;
}
```