Change analog clock hand color

🧰 Built-In Apps and Drivers Dashboard
#1

Hello everyone.
After so much searching and trying I did not find the solution.

I want to change the color of the analog clock hands to white.

In the chrome inspector I managed to change it but I don't know how to insert the JSON code so that it grabs it.

I have this in my test panel:
{
"localization": "Spanish",
"roundedCorners": 10,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [],
"colWidth": 200,
"cloudRefresh": 10,
"hsmPin": "",
"hide3dot": false,
"gridGap": 5,
"clockMode": true,
"tiles": [
{
"rowSpan": 1,
"template": "clock-analog",
"col": 1,
"colSpan": 1,
"id": 0,
"row": 1
}
],
"goBack": true,
"modePin": "",
"bgColor": "#",
"lanRefresh": 2,
"iconSize": 42,
"cols": 3,
"rowHeight": 190,
"hideEvents": false,
"tempScale": "C",
"noColors": false,
"readOnly": null,
"rows": 3,
"hideIconText": true,
"hideTextShadow": true,
"name": "Prueba 1",
"fontSize": 12
}

Captura

I was attentive to your responses.

#2

Add this to your CSS:

#tile-XX .clock-hour {background: rgb(255, 255, 255);}
#tile-XX .clock-minute {background: rgb(255, 255, 255);}
#tile-XX .clock-second {background: rgb(255, 255, 255);}

Change XX for the number of your clock tile.

1 Like
#3

Thank you so much...

[image]

#4

Friend taking advantage of the thread, how do I change the size of the tiles independently?

#5

I think you mean to get tiles of different size on the same dashboard.

Just define a bigger grid in your settings and increase the size of the individual tile as you wish.

For lot of information on how to enhance your dashboard look at this topic:

Download the Hubitat app