MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Can't change color of analog clock in default clock module

    Scheduled Pinned Locked Moved Solved Custom CSS
    4 Posts 2 Posters 1.4k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J Offline
      jjd
      last edited by

      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–

      PeterPangP J 2 Replies Last reply Reply Quote 0
      • J Offline
        jjd @jjd
        last edited by jjd

        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”.
        1 Reply Last reply Reply Quote 1
        • PeterPangP Offline
          PeterPang @jjd
          last edited by

          @jjd
          Its seem to have write [ code name , such as #11111111 ] , not the color name as red .

          J 1 Reply Last reply Reply Quote 0
          • J Offline
            jjd @PeterPang
            last edited by

            @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.

            1 Reply Last reply Reply Quote 0
            • J Offline
              jjd @jjd
              last edited by jjd

              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”.
              1 Reply Last reply Reply Quote 1
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy