16
Jan - 2017

How to customize the Flip Clock Object for website x5

flipclock-test
flipclock-test Theres been a few questions on the website x5 helpcenter about whether its possible to customise the flip clock object that you can buy from the helpcenter marketplace, now there are no default settings to customise the style but you can do it using css3 so here it goes. In demo 1 we changed the colour of everything (the clock, background, & labels) we then decided to make the labels bigger and here is the code to do it. flipclock-test

[creativ_button url=”https://www.mixupmarket.com/testing/flip-clock-test.html” icon=”signin” label=”Demo 1″ colour=”dark-gray” colour_custom=”” size=”large” edge=”straight” target=”_blank”]

Now on sitemap creation highlight the page your table is on and click on page properties & then go to the expert tab in before closing the head tag copy the following style code.

<style>
.flip-clock-wrapper ul li a div div.inn {
color: #76ddf7 !important;
background-color: #fff !important;
}
.flip-clock-divider .flip-clock-label {
color: #f230db !important;
font-size: 20px !important;
font-weight: bold !important;
text-align: center !important;
}
.flip-clock-dot {
background: #f2303a !important;
}
</style>

Demo 2

flipclock-test-2

[creativ_button url=”https://www.mixupmarket.com/testing/flip-clock-test-2.html” icon=”signin” label=”Demo 1″ colour=”dark-gray” colour_custom=”” size=”large” edge=”straight” target=”_blank”]

In demo 2 we did exactly the same but used the clock and not the countdown to test it this time, we did exactly the same in demo 1 but this time we removed the bold font, and changed the font to dosis and here is the code for the clock Now on sitemap creation highlight the page your table is on and click on page properties & then clickon expert in before closing the head tag copy the following style code.

<style>
.flip-clock-wrapper ul li a div div.inn {
color: #76ddf7 !important;
background-color: #fff !important;
font-family: Dosis !important;
font-weight: normal !important;
}
.flip-clock-meridium a {
color: #76ddf7 !important;
font-family: Dosis !important;
font-weight: normal !important;
}
.flip-clock-dot {
background: #f2303a !important;
}
</style>

Previous Article

How to create a 404 error page with website x5

Next Article

Its Competition Time

There are no comments.

Write a comment

All fields marked with an asterisk (*) are required.