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

I am using the default clock module in analog mode. Is there a way to enlarge the date up top, and change the thickness of the clock hands?

Scheduled Pinned Locked Moved Solved Troubleshooting
12 Posts 2 Posters 828 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.
  • S Offline
    sdetweil @briantogo
    last edited by sdetweil Apr 26, 2025, 7:13 PM Mar 31, 2025, 4:02 AM

    @briantogo font-size was easy

    .clock .date {
      font-size: 60px; // or whatever
    }
    

    Screenshot 2025-03-30 at 8.57.31 PM.png

    the clock hands also easy as they are commented in clock-styles.css
    for hour hand

    .clock-hour {
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -2px 0 -2px -25%; /* numbers must match negative length & thickness */
      padding: 2px 0 2px 25%; /* indicator length & thickness */
      background: var(--color-text-bright);
      transform-origin: 100% 50%;
      border-radius: 3px 0 0 3px;
    }
    

    change 2 to something else, in all the places

    here (and in the screen shot) 4 in custom.css

    .clock-hour {
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -4px 0 -4px -25%;   /* numbers must match negative length & thickness */
      padding: 4px 0 4px 25%;     /* indicator length & thickness */
      background: var(--color-text-bright);
      transform-origin: 100% 50%;
      border-radius: 3px 0 0 3px;
    }
    

    clock-minute for minute handle
    clock-second for second hand

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    B 1 Reply Last reply Apr 6, 2025, 3:18 PM Reply Quote 0
    • B Offline
      briantogo @sdetweil
      last edited by Apr 6, 2025, 3:18 PM

      @sdetweil
      OK, so I get all this Sam, thanks for the help, but now I have a new issue. I’m using a Pi3, and I don’t think it has the horsepower to run Magic Mirror smoothly. The program frequently locks up, mmm-rain-map is the first to freeze. And now I can’t expand the various lines in the developers window.

      So now I’m thinking of getting a Pi5 with 16 GB’s of RAM. What do you think?

      Thanks,
      Brian

      S 1 Reply Last reply Apr 7, 2025, 11:21 AM Reply Quote 0
      • S Offline
        sdetweil @briantogo
        last edited by Apr 7, 2025, 11:21 AM

        @briantogo you dont NEED to go all the way to 16g
        4 is plenty, but the future is hard to tell

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • B Offline
          briantogo
          last edited by Apr 26, 2025, 6:02 PM

          Hi Sam, I loaded my new RPi5 with 16 GB’s ram, and boy does it fly!

          So getting back to issue, I tried changing the clock hands in clock_styles.css. I changed the hour hand to 2 and changed the minute hand to 20, and could not tell the difference.

          Also, I could not change the text size of the date above the analog clock. When I use the developer mode, I cannot expand

          When I click the drop down arrow, it briefly expands then contracts again.

          Any suggestions please?

          Thanks,
          Brian!

          51770e03-baa3-45d2-8111-9e6fd5bcb14e-image.png

          S 2 Replies Last reply Apr 26, 2025, 7:01 PM Reply Quote 0
          • S Offline
            sdetweil @briantogo
            last edited by Apr 26, 2025, 7:01 PM

            @briantogo disable seconds for the debug then it will stay

            you changed both values for both hands, right?

            show your custom css for clock

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @briantogo
              last edited by Apr 26, 2025, 7:14 PM

              @briantogo said in I am using the default clock module in analog mode. Is there a way to enlarge the date up top, and change the thickness of the clock hands?:

              I tried changing the clock hands in clock_styles.css

              don’t change them there

              copy that whole css entry to custom.css

              for each hand

              don’t change our files

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • B Offline
                briantogo
                last edited by May 1, 2025, 4:58 PM

                Finally got it Sam, thanks for the help

                S 1 Reply Last reply May 1, 2025, 5:06 PM Reply Quote 1
                • S sdetweil has marked this topic as solved on May 1, 2025, 5:06 PM
                • S Offline
                  sdetweil @briantogo
                  last edited by May 1, 2025, 5:06 PM

                  @briantogo awesome!!

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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