Solved

Change appearance of timer

Forum|Forum|3 years ago
May 2, 2022
4 replies
290 views

+1

Samkha

I am adding a timing question with count up. The appearance is not that pleasant. How do I change the format, size, appearance, and location of the timer?

Best answer by Tom_1842

Hi there, I might be able to point you in the right direction. Open up a survey preview of a survey that has the Timer question in place. In Chrome or Firefox, try hitting F12 on your Keyboard to inspect the page. This will bring up all the HTML code that is drawing the page. Using the cursor icon in the top left of the page, you can hover over elements on the page and see the specific lines of code that are constructing that element. Off to the right, you can see the Styling that gets applied to elements with a .FlipClock class, which the includes the Timer question.

By adjusting the values of the code and placing it in the Custom CSS portion of your Survey's Look & Feel, you can change how the FlipClock gets displayed. In the below, I've increased the border radius and changed the background color to green.
.FlipClock {
background-color: #00FF00;
padding: 10px;
border-radius: 10px;
margin: 10px auto;
float: left;
box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}

+27

TomG
Level 8 ●●●●●●●●
Forum|Forum|3 years ago
May 2, 2022

You can use CSS to change the styles associated with the .FlipClock class and its descendants. Use the browser's Inspect feature to gather more details.

Like

S

+1

Samkha
Author
Forum|Forum|3 years ago
May 5, 2022

TomG
Can you elaborate more or direct me to a video. I am not at all coding savvy.

Like

+28

Tom_1842
Level 8 ●●●●●●●●
Answer
Forum|Forum|3 years ago
May 5, 2022

Hi there, I might be able to point you in the right direction. Open up a survey preview of a survey that has the Timer question in place. In Chrome or Firefox, try hitting F12 on your Keyboard to inspect the page. This will bring up all the HTML code that is drawing the page. Using the cursor icon in the top left of the page, you can hover over elements on the page and see the specific lines of code that are constructing that element. Off to the right, you can see the Styling that gets applied to elements with a .FlipClock class, which the includes the Timer question.

By adjusting the values of the code and placing it in the Custom CSS portion of your Survey's Look & Feel, you can change how the FlipClock gets displayed. In the below, I've increased the border radius and changed the background color to green.
.FlipClock {
background-color: #00FF00;
padding: 10px;
border-radius: 10px;
margin: 10px auto;
float: left;
box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}