CODEWITHSUNDEEP
cssflipclock
Bill Teale
Bill Teale

Reputation: 169

Center Flipclock and change text to white

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

Upvotes: 1

Views: 2143

Answers (2)

jimasun
jimasun

Reputation: 644

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

Upvotes: 0

J. Titus
J. Titus

Reputation: 9690

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;
}

Upvotes: 1

Related Questions