I expect it won't be so much a case of tweaking the built-in thermostat template, rather, creating the separate elements as individual tiles. That's not to say that will be a reason not to attempt it, just trying to guide you down that path (or some other path) rather than grappling with formatting the existing template.
I can't offer much more than that at the moment in terms of any concrete code or example, I would need some time to play around with it. In the meantime, I would suggest:
- Look at the Show of Your Dashboards topic, if you haven't already, there are some great custom thermostat examples dotted throughout the topic, from memory some of the guys in Canada had some sleek looking dashboards
- For the 4 buttons either side of the dial, off the top of my head.... Look at
- Using buttons and/or switches with rules to manage responding to their use on the dashboard
- The tiles rounded through CSS
- Custom icons, either built-in or from outside, e.g. the Noun Project
- Background colors set using CSS or the template defaults
- Potentially use Hub Variables for some of the text displayed, making the tiles for these read-only
For the dial.... Nothing is impossible, it's just a matter of time and effort.... I feel like I am at work One option may be to overlay a couple of tiles using the z-index property, the background tile being the outermost part of the dial, overlayed with the display of the temperature, etc. I was going to offer a fallback of hosting an iFrame if it becomes too difficult, but to provide the control back to the HE device becomes a little cumbersome to setup for such a small use-case (not a criticism, just reality).
Hopefully that gives you some ideas at least.... (I'm so envious of the retired folk around here who can spend more time on this stuff.... )