How to change font color on text flipclock.js

Question

I'm having some issues trying to change the text, hours, days, months, years, into the color green, I'm using flipclock.js, does anyone know how to change it, if so could you guide me in the right direction.

Answer 1

In case you are looking for advanced solution to change other colors here is an solution posted already here.

This is a solution adapted from one of the repo's closed issue (unsolved). It seems that the dev's promised a new API but that was more than 1 year ago.

It's not perfect as there are some issues when setting $clock-flip-font-size: 120px. Also, when minutes are being displayed as 3 digits, the "Minutes" text is not centered.

Here is the codepen: https://codepen.io/jimasun/pen/PzAqVw/

// 
// ------------------------- FlipClock
// 
$clock-flip-font-size: 120px
$clock-flip-border-radius: 8px
$clock-digit-gap: 20px
$clock-dot-size: 20px

$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))

$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000

.countdown-wrapper
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%, -50%)

.countdown.flip-clock-wrapper ul
  height: $clock-height
  margin: 0 $clock-flip-margin
  width: $clock-flip-width
  box-shadow: $clock-flip-shadow

.countdown.flip-clock-wrapper ul li
  line-height: $clock-height

.countdown.flip-clock-wrapper ul li a div div.inn
  background-color: $clock-flip-bg
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size
  text-shadow: $clock-flip-font-shadow

.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
  border-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.down
  border-bottom-left-radius: $clock-flip-border-radius
  border-bottom-right-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.up:after
  top: (($clock-height / 2) - 1px)

.countdown .flip-clock-dot.top
  top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot.bottom
  top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot
  height: $clock-dot-size
  left: $clock-dot-size
  width: $clock-dot-size
  background: $clock-flip-bg

.countdown .flip-clock-divider
  height: $clock-height
  width: ($clock-dot-size * 3)
  &:first-child
    width: 0

.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
  right: -1 * $clock-flip-section-width

.countdown .flip-clock-divider .flip-clock-label
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size / 4
  width: 2 * $clock-flip-width + 4 * $clock-flip-margin
// 
// ------------------------- FlipClock
// 

Answer 2

The question is already answered, but I think this can be useful for other people:

Simple CSS to invert FlipClock.js default colors to white background and black text:

.flip-clock-wrapper ul {
        background: #fff;
    }

        .flip-clock-wrapper ul li a div.up:after {
            background-color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .flip-clock-wrapper ul li a div div.inn {
            color: #111;
            text-shadow: 0 1px 1px #555;
            background-color: #ddd;
        }

Answer 3

If your using new version its on line around 225 (css file)

.flip-clock-divider .flip-clock-label {

color: green; }