• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Centering text and adding blinking dots to the clock

Scheduled Pinned Locked Moved Troubleshooting
3 Posts 2 Posters 543 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.
  • M Offline
    Morganga
    last edited by Dec 14, 2020, 7:43 PM

    Hey,

    I’d like to center the text for the clock module (only for the 24hour mark under the actual date) and also add blinking dots between the hours and minutes.

    Very new to this, could anyone help ? Thank you !

    A 1 Reply Last reply Dec 15, 2020, 10:58 AM Reply Quote 0
    • A Offline
      ashishtank Module Developer @Morganga
      last edited by Dec 15, 2020, 10:58 AM

      @Morganga you can do this with css animation. You may want to disable the seconds in clock as it will update the Dom every second and then you won’t see much of animation.

      I did this in dirty way using JavaScript as below by changing clock.js and keeping displaySeconds to true

      if (this.config.clockBold === true) {
      			timeString = now.format(hourSymbol + '[ < span class="bold">]mm[ < /span>]');
      		} else {
                               //here to
      			if (now.toDate().getSeconds() % 2 == 0)
      				timeString = now.format(hourSymbol + ":mm");
      			else
      				timeString = now.format(hourSymbol + " mm");
                               //here 
      		}
      

      Blinking text example using css @ https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3
      you will need to wrap : in span or other element and apply css class to it and let it blink.

      About centering the text is also possible with CSS, check the css classes using dev tools.

      M 1 Reply Last reply Dec 15, 2020, 12:10 PM Reply Quote 0
      • M Offline
        Morganga @ashishtank
        last edited by Morganga Dec 15, 2020, 12:44 PM Dec 15, 2020, 12:10 PM

        @ashishtank Thank you for this.

        Again, very new to coding and have no idea what to do or where to change things to make the lower text (Time) centered … Could you help me a bit more with this ?

        Figured it out thank you !

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        1 / 1
        • First post
          1/3
          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