Course Content

Customizing Countdown Timer Theme with CSS


Murray Gray in Course Content

Dec 09, 2020 - 4 min read. Available on all plans.

We've created some great countdown timer styles for you that you can apply to your membership site experience.

To get started:

  • Open any course and open the Step 5: Design Your Course Experience section
  • Open the CSS sub-section
  • Set the Enable Custom CSS For This Course toggle to ON (green)
  • You should then see the CSS field appear. Add your CSS code to that box

Make It stick to the top of the page

Just add this code alongside any other code you add to make your countdown stick to the top of the screen when you scroll!


.top-timer {
     position: sticky;
    top: 0;
    z-index: 9999;
    opacity: 100;
    background-color: #ffffff !important;
}

Fun 1


@import '//fonts.googleapis.com/css?family=Bangers';

.top-timer__box {
  background: transparent;
  flex-direction: row;
  margin-left: 8px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family:Bangers;
  letter-spacing: 0.5px;
}

.top-timer__text {
  font-size: 24px;
}

.top-timer__count,
.top-timer__descr {
  color: red;
  font-size: 40px;
  line-height: 40px;
}

.top-timer__descr {
  letter-spacing: 20px;
  max-width: 25px;
  overflow: hidden;
}

Fun 2 (Alternative Colors)


@import '//fonts.googleapis.com/css?family=Bangers';

.top-timer {
  background: #000;
}

.top-timer__box {
  background: transparent;
  flex-direction: row;
  margin-left: 8px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family:Bangers;
  letter-spacing: 0.5px;
}

.top-timer__text {
  color: #fff;
  font-size: 24px;
}

.top-timer__count,
.top-timer__descr {
  color: red;
  font-size: 40px;
  line-height: 40px;
}

.top-timer__descr {
  letter-spacing: 20px;
  max-width: 25px;
  overflow: hidden;
}

Fun 3 (Vertical)


@import '//fonts.googleapis.com/css?family=Bangers';

.top-timer__items {
  flex-direction: column;
}

.top-timer__box {
  background: transparent;
  flex-direction: row;
  margin-left: 5px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family:Bangers;
  letter-spacing: 0.5px;
}

.top-timer__text {
  font-size: 24px;
  margin: 10px 10px 5px 0;
}

.top-timer__count,
.top-timer__descr {
  color: red;
  font-size: 52px;
  line-height: 52px;
}

.top-timer__descr {
  letter-spacing: 20px;
  max-width: 40px;
  overflow: hidden;
}

@media (max-width: 500px) {
  .top-timer__count,
  .top-timer__descr {
    font-size: 42px;
    line-height: 42px;
  }

  .top-timer__descr {
    max-width: 32px;
  }
}

Flipclock 1


@import url('https://fonts.googleapis.com/css2?family=Barlow:[email protected];500;700&display=swap');

.top-timer__box {
  background: #333333;
  border-radius: 8px;
  height: 66px;
  min-width: 58px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: Barlow;
}

.top-timer__text {
  color: #999999;
  font-size: 23px;  
  font-weight: 700;
}

.top-timer__count,
.top-timer__descr {
  color: #fff;
}

.top-timer__count {
  font-size: 28px;
  font-wiight: 500;
}

.top-timer__descr {
  text-transform: unset;
  font-size: 13px;
}

Flipclock 2


@import url('https://fonts.googleapis.com/css2?family=Barlow:[email protected];500;700&display=swap');

.top-timer__items {
  flex-direction: column;
}

.top-timer__items {
  padding-top: 20px!important;
  padding-bottom: 20px!important;
}

.top-timer__box {
  background: #333333;
  border-radius: 8px;
  height: 66px;
  min-width: 58px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: Barlow;
}

.top-timer__text {
  color: #999999;
  font-size: 24px;  
  font-weight: 700;  
  margin-right: 0;
  margin-bottom: 15px;
}

.top-timer__count,
.top-timer__descr {
  color: #fff;
}

.top-timer__count {
  font-size: 28px;
  font-wiight: 500;
}

.top-timer__descr {
  text-transform: unset;
  font-size: 13px;
}

Circles 1


@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');

.top-timer__box {
  background: white;
  border: 1px solid #221c39;
  border-radius: 50%;
  min-width: 70px;
  height: 70px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: Poppins;
}

.top-timer__text {
  font-size: 19px;
}

.top-timer__count {
  color: red;
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
}

.top-timer__descr {
  font-size: 12px;
  font-weight: 600;
  text-transform: unset;
}

@media (max-width: 768px) {
  .top-timer__items {
    flex-direction: column;
  }

  .top-timer__text {
    margin-right: 0;
    margin-bottom: 12px;
    letter-spacing: 0;
  }
}

Circles 2


@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');

.top-timer {
  background: #c5e733;
}

.top-timer__box {
  background: white;
  border-radius: 50%;
  min-width: 70px;
  height: 70px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: Poppins;
}

.top-timer__text {
  font-size: 19px;
}

.top-timer__count {
  color: red;
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
}

.top-timer__descr {
  font-size: 12px;
  font-weight: 600;
  text-transform: unset;
}

@media (max-width: 768px) {
  .top-timer__items {
    flex-direction: column;
  }

  .top-timer__text {
    margin-right: 0;
    margin-bottom: 12px;
    letter-spacing: 0;
  }
}

Circles 4


@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');

.top-timer {
  background: #c5e733;
}

.top-timer__items {
  flex-direction: column;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
}

.top-timer__box {
  background: white;
  border-radius: 50%;
  min-width: 70px;
  height: 70px;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: Poppins;
}

.top-timer__text {
  font-size: 19px;
  margin-right: 0;
  margin-bottom: 12px;
  letter-spacing: 0;
}

.top-timer__count {
  color: red;
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
}

.top-timer__descr {
  font-size: 12px;
  font-weight: 600;
  text-transform: unset;
}

Flipclock 3


.top-timer__box {
  min-width: unset;
  height: unset;
  background: transparent;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.top-timer__text {
  color: #221c39;
  font-size: 20px;
  font-weight: 500;  
}

.top-timer__count {
  color: white;
  font-size: 32px;
  line-height: 32px;
  background: #333232;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 53px;
  height: 60px;
  padding: 0 4px 4px;
  margin-bottom: 3px;
}

.top-timer__descr {
  font-size: 14px;
  font-weight: 500;
  text-transform: unset;
  color: #221c39;
}

Flipclock 4


.top-timer__items {
  flex-direction: column;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
}

.top-timer__box {
  min-width: unset;
  height: unset;
  background: transparent;
}

.top-timer__text,
.top-timer__count,
.top-timer__descr {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.top-timer__text {
  color: #221c39;
  font-size: 20px;
  font-weight: 500; 
  margin-right: 0;
  margin-bottom: 12px;
  letter-spacing: 0;
}

.top-timer__count {
  color: white;
  font-size: 32px;
  line-height: 32px;
  background: #333232;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 53px;
  height: 60px;
  padding: 0 4px 4px;
  margin-bottom: 3px;
}

.top-timer__descr {
  font-size: 14px;
  font-weight: 500;
  text-transform: unset;
  color: #221c39;
}
HELP ARTICLES
3