# How to change color or spacing of digits in node-red-contrib-ui-digital-clock?

**URL:** <https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [31 October 2025 09:52 UTC](https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550 "2025-10-31T09:52:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [31 October 2025 09:52 UTC](https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550/1 "2025-10-31T09:52:52Z")

</div>

Hi everyone

I’m using the [`node-red-contrib-ui-digital-clock`](https://flows.nodered.org/node/node-red-contrib-ui-digital-clock) node on my Dashboard, and I’d like to know if there’s any way to customize the appearance — for example:

- Change the color of the digits
- Add or adjust spacing between the “:” separators (e.g. between hours, minutes, seconds)

I checked the node’s options but didn’t find any direct way to modify these visual aspects.

If that’s not possible with this node, maybe someone here knows another Dashboard widget or shared flow that displays a digital-style clock (7-segment digits) where color and spacing can be customized?

Any suggestions or links would be really appreciated.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [31 October 2025 10:15 UTC](https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550/2 "2025-10-31T10:15:16Z")

</div>

> [@karlgotbread](#):
>
> Any suggestions or links would be really appreciated.

Search the forum for 'digital-clock color'.

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [31 October 2025 10:48 UTC](https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550/3 "2025-10-31T10:48:02Z")

</div>

Thanks! The color change works great.  
Just wondering — is there any way to adjust the **spacing between the digits or the “:”** in `ui_digital_clock`?  
I tried `letter-spacing`, but it doesn’t seem to affect the SVG.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 November 2025 10:48 UTC](https://discourse.nodered.org/t/how-to-change-color-or-spacing-of-digits-in-node-red-contrib-ui-digital-clock/99550/4 "2025-11-30T10:48:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.