MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. jjd
    3. Best
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    J
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 8
    • Groups 0

    Posts

    Recent Best Controversial
    • RE: Can't change color of analog clock in default clock module

      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:

      1. In modules/default/clock/faces, I copied face-010.svg to face-013.svg to create a new face.

      2. I edited face-013.svg to modify the style to have a fill color:
        <style>.cls-1{fill:#f00;}</style>

      3. 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;
      }
      
      1. 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”.
      posted in Custom CSS
      J
      jjd
    • 1 / 1