Stopwatch buttons and design

[Dan76]

Is there a way to remove the big circle around the stopwatch so that it just shows the time elapsed? The circle is kinda hard to fit into a rectangular screen, at least from an asthetic point of view (imo) and takes up a lot of room.

Also, the start/stop buttons are relatively small and easy to miss. I’ve had to get athletes to restart on more than one occasion as I miss the buttons (my clumsy fingers are equally to blame though ).

Don’t mean to complain but the proportions of the stopwatch design are not ideal for real-world use. The part that we interact with is small while the passive part is huge - shouldn’t it be the other way around?

Is there a way to add a custom start/stop action to a big fat button that I add myself as an image? Or CSS to reshape the watch in any way?

[Darren_Murphy]

@Darren_Alderman - the other one - did a bit of funky stuff with the Stopwatch using CSS in the below tutorial:

Show Game Time / Timer (with a modified stopwatch)

Background My #TeamSeas Matching Game has a timer that shows your elapsed time playing the game. If your game time is fast enough, you make it on the leaderboard.

See in Action

Play the game: <a href="https://teamseas.glideapp.io/">https://teamseas.glideapp.io/</a> [teamseasgame]

Tutorial A few people asked how I added the game timer, so I made this video to show you how: [How to Add a Timer to Your Glide App (plus custom CSS styling)]

Use Custom CSS at your…

If I recall correctly, he also gives a few tips on how to actually identify the correct CSS classes.

[Dan76]

Great thanks! I searched but didn’t see that, will check it out