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?
Solved
Change appearance of timer
+1Best 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%);
}
+27You 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.
+28Hi 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%);
}
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.