1

I have Flipclock working fine on my website, but I need to change the "days: Hourrs: Minutes:" text to white, but can't find what css to add/amend

also (I'm using bootstrap3) I can;t get the Flipclock to center in a div. I currently have the following code:

<div class="col-md-12 text-center">
<div class="clock center-block" style="margin:2em;" align="center"></div>

But the clock stubbornly stays to the left.

Thanks for any advice

Bill Teale
  • 159
  • 3
  • 15

2 Answers2

1

Change header text to white (edited):

.flip-clock-wrapper .flip-clock-divider .flip-clock-label {
    color: #FFF;
}

Class .center-block from Bootstrap applies margin: 0 auto; and you're overwriting that with style="margin:2em;". Remove that style and the clock should center appropriately. You may need to set an explicit width on the clock. FlipClock's website uses a default of 460px:

.flip-clock-wrapper .clock {
    width: 460px;
    height: 116px;
    margin: 0 auto;
}
J. Titus
  • 9,535
  • 1
  • 32
  • 45
  • Can you provide a JSFiddle example of your problem? – J. Titus Jul 07 '16 at 12:38
  • It would be better if you could isolate the problem to a Fiddle. – J. Titus Jul 07 '16 at 12:43
  • Well, it looks like the centering worked. I forked the fiddle and made some changes: https://jsfiddle.net/da9ptksw/1/. I also edited my answer slightly above to take into account the `.flip-clock-wrapper` class in place of the `.header` class FlipClock's website was using. – J. Titus Jul 07 '16 at 13:01
0

There is a pretty advanced solution here! It will allow you to change the all colours and shadows in addition to the size.

resizing flipclock.js not resizing as expected

Community
  • 1
  • 1
jimasun
  • 604
  • 9
  • 12