Change appearance of timer | XM Community
Skip to main content

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?

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.


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


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.
BrowserInspecting.png
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%);
}
GreenTimer.png


Tom_1842 Thanks a million. Your instructions were so clear and useful.


Leave a Reply