Read the statement by Michael Teeuw here.
Can't change color of analog clock in default clock module
-
I’m not an expert CSS guy, but I thought I was doing the right thing. Can someone let me know what I’m doing wrong? I want the entire analog face red for night time.
In my config/config.js, I have this for the clock module:
{ module: "clock", position: "middle_center", classes: "nightclock", config: { displaySeconds: true, displayType: "analog", analogSize: "400px", analogFace: "face-010" } },
and then in my css/custom.css I have:
.clock .nightclock { color: red; }
to no effect – the clock is still white.
I tried bringing MagicMirror up inside Chrome and using dev tools to mess with the css, but nothing I could do there would seem to have an effect on the color either.
Thanks for any help,
–Jim–
-
OK, I finally succeeded in changing the analog clock to red. It wasn’t pretty and I don’t know if there is a better way. But here’s what I did, for the record:
-
In modules/default/clock/faces, I copied face-010.svg to face-013.svg to create a new face.
-
I edited face-013.svg to modify the style to have a fill color:
<style>.cls-1{fill:#f00;}</style>
-
Added the following to my custom.css:
/* for the date display */ .nightclock .date.normal.medium { color: #f00; } /* for the hour hand */ .nightclock .clockHour { background: #f00; } /* for the minute hand */ .nightclock .clockMinute { background: #f00; }
- Edit the config: section of the clock module in config.js.
- Added secondsColor: “#f00” to the config: section of the clock module in config.js to change the color of the second hand
- Change the analogFace config to the newly edited “face-013”.
-
-
@jjd
Its seem to have write [ code name , such as #11111111 ] , not the color name as red . -
@peterpang said in Can't change color of analog clock in default clock module:
@jjd
Its seem to have write [ code name , such as #11111111 ] , not the color name as red .Thanks, but no luck. I tried #ff0000 and everything’s still white.
-
OK, I finally succeeded in changing the analog clock to red. It wasn’t pretty and I don’t know if there is a better way. But here’s what I did, for the record:
-
In modules/default/clock/faces, I copied face-010.svg to face-013.svg to create a new face.
-
I edited face-013.svg to modify the style to have a fill color:
<style>.cls-1{fill:#f00;}</style>
-
Added the following to my custom.css:
/* for the date display */ .nightclock .date.normal.medium { color: #f00; } /* for the hour hand */ .nightclock .clockHour { background: #f00; } /* for the minute hand */ .nightclock .clockMinute { background: #f00; }
- Edit the config: section of the clock module in config.js.
- Added secondsColor: “#f00” to the config: section of the clock module in config.js to change the color of the second hand
- Change the analogFace config to the newly edited “face-013”.
-