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 523 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.
    • MorgangaM Offline
      Morganga
      last edited by

      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 Reply Quote 0
      • A Offline
        ashishtank Module Developer @Morganga
        last edited by

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

        MorgangaM 1 Reply Last reply Reply Quote 0
        • MorgangaM Offline
          Morganga @ashishtank
          last edited by Morganga

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