# Countdown Timer **URL:** https://community.elfsight.com/c/css-codes/countdown-timer/164.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Change size of the close button](https://community.elfsight.com/t/change-size-of-the-close-button/171283)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [August 13, 2026, 1:14pm UTC](https://community.elfsight.com/t/change-size-of-the-close-button/171283 "2026-08-13T13:14:30Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .es-element-close-button { width: 40px !important; height: 40px !important; } .es-element-close-button-icon, .es-… --- ## [Make "Install to required position" look like a "Static Top Banner"](https://community.elfsight.com/t/make-install-to-required-position-look-like-a-static-top-banner/34204)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 13, 2023, 1:19pm UTC](https://community.elfsight.com/t/make-install-to-required-position-look-like-a-static-top-banner/34204 "2023-12-13T13:19:41Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-inner{ flex-direction: row; } .eapps-countdown-timer-item-container { margin: 0; } .eapps… --- ## [Underline button text](https://community.elfsight.com/t/underline-button-text/115409)
**Author:** [@Little\_Farmhouse\_Flo](https://community.elfsight.com/u/Little_Farmhouse_Flo)\ **Replies:** 1\ **Last updated:** [April 21, 2025, 1:23pm UTC](https://community.elfsight.com/t/underline-button-text/115409 "2025-04-21T13:23:06Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-button { text-decoration: underline; } --- ## [Change font weight of title text (change 300 to your choice weight)](https://community.elfsight.com/t/change-font-weight-of-title-text-change-300-to-your-choice-weight/115411)
**Author:** [@Little\_Farmhouse\_Flo](https://community.elfsight.com/u/Little_Farmhouse_Flo)\ **Replies:** 1\ **Last updated:** [April 21, 2025, 3:10am UTC](https://community.elfsight.com/t/change-font-weight-of-title-text-change-300-to-your-choice-weight/115411 "2025-04-21T03:10:47Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-inner{ font-weight: 300; } --- ## [Change text size and corner radius of the button](https://community.elfsight.com/t/change-text-size-and-corner-radius-of-the-button/57470)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:50pm UTC](https://community.elfsight.com/t/change-text-size-and-corner-radius-of-the-button/57470 "2024-06-18T12:50:51Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-button { font-size:20px; border-radius: 20px; } --- ## [Reduce spacing between heading and timer](https://community.elfsight.com/t/reduce-spacing-between-heading-and-timer/57469)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:48pm UTC](https://community.elfsight.com/t/reduce-spacing-between-heading-and-timer/57469 "2024-06-18T12:48:58Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-item-container { margin-top: 20px; } --- ## [Reduce width of embed widget (similar to banner)](https://community.elfsight.com/t/reduce-width-of-embed-widget-similar-to-banner/57467)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:46pm UTC](https://community.elfsight.com/t/reduce-width-of-embed-widget-similar-to-banner/57467 "2024-06-18T12:46:19Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer { max-width: 400px; margin: 0 auto; } --- ## [Change font size of labels and numbers on mobile](https://community.elfsight.com/t/change-font-size-of-labels-and-numbers-on-mobile/57466)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:43pm UTC](https://community.elfsight.com/t/change-font-size-of-labels-and-numbers-on-mobile/57466 "2024-06-18T12:43:55Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: @media (max-width: 480px) { .eapps-countdown-timer-item-value-base { font-size:10px!important; } .eapps-countdown-tim… --- ## [Make time display reversed (minutes-hours-days)](https://community.elfsight.com/t/make-time-display-reversed-minutes-hours-days/57464)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:41pm UTC](https://community.elfsight.com/t/make-time-display-reversed-minutes-hours-days/57464 "2024-06-18T12:41:50Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-item { flex-direction: row-reverse; } --- ## [Change size of the labels (days, hours, minutes)](https://community.elfsight.com/t/change-size-of-the-labels-days-hours-minutes/57462)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:39pm UTC](https://community.elfsight.com/t/change-size-of-the-labels-days-hours-minutes/57462 "2024-06-18T12:39:24Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-item-group-label{ font-size:30px!important; } --- ## [Change height (banners)](https://community.elfsight.com/t/change-height-banners/57461)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 12:37pm UTC](https://community.elfsight.com/t/change-height-banners/57461 "2024-06-18T12:37:28Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .global-styles, .eapps-countdown-timer-position-bar { height: 100px!important; } --- ## [Add background image](https://community.elfsight.com/t/add-background-image/57441)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 10:10am UTC](https://community.elfsight.com/t/add-background-image/57441 "2024-06-18T10:10:13Z")
Add the code below to Custom CSS field on your Countdown Timer widget’s Settings tab: .eapps-countdown-timer { background: url('url'); } Do not forget to replace url with your image URL :slightly\_smiling\_face: --- ## [Change font for all elements (Countdown Timer)](https://community.elfsight.com/t/change-font-for-all-elements-countdown-timer/22892)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 19, 2023, 12:56pm UTC](https://community.elfsight.com/t/change-font-for-all-elements-countdown-timer/22892 "2023-10-19T12:56:01Z")
Add the code below to Custom CSS field on your Countdown Timer widget’s Settings tab: .eapps-countdown-timer-inner { font-family: Gotham Rounded Bold!important; } --- ## [Change timer numbers color](https://community.elfsight.com/t/change-timer-numbers-color/23368)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 24, 2023, 9:29am UTC](https://community.elfsight.com/t/change-timer-numbers-color/23368 "2023-10-24T09:29:51Z")
Add the code below to Custom CSS field on your Countdown Timer widget’s Settings tab: .eapps-countdown-timer-item-value \* { color: #000000 !important; } --- ## [Change link color in Message Before Timer](https://community.elfsight.com/t/change-link-color-in-message-before-timer/23367)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 24, 2023, 9:28am UTC](https://community.elfsight.com/t/change-link-color-in-message-before-timer/23367 "2023-10-24T09:28:13Z")
Add the code below to Custom CSS field on your Countdown Timer widget’s Settings tab: .eapps-countdown-timer-header-title-text a { color: white; } --- ## [Change color of all elements](https://community.elfsight.com/t/change-color-of-all-elements/34211)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 13, 2023, 1:50pm UTC](https://community.elfsight.com/t/change-color-of-all-elements/34211 "2023-12-13T13:50:43Z")
Add this code to the Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: /\* Counter background \*/ .eapps-countdown-timer-item-value { background-color: violet!important; } /\* Text \*/ .eap… --- ## [Remove the close button in banners](https://community.elfsight.com/t/remove-the-close-button-in-banners/22895)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 19, 2023, 1:01pm UTC](https://community.elfsight.com/t/remove-the-close-button-in-banners/22895 "2023-10-19T13:01:59Z")
Add the code below to Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-bar-close{ display: none; } Guys, if this code was helpful to you, please drop a line in th… --- ## [Change header font size](https://community.elfsight.com/t/change-header-font-size/22894)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 2\ **Last updated:** [February 15, 2024, 6:53pm UTC](https://community.elfsight.com/t/change-header-font-size/22894 "2024-02-15T18:53:14Z")
Add the code below to Custom CSS field on the Settings tab of your Countdown Timer widget’s settings: .eapps-countdown-timer-header-title-text{ font-size:25px!important; }