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.

    How would I change the size of modules?

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    7 Posts 4 Posters 2.1k Views 4 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.
    • T Offline
      tom1234tom123
      last edited by

      I have an 800 x 480 display and the default digital clock takes up a lot of space. How would I be able to make it smaller and make other modules that I may install smaller?

      S StoffbeuteluweS 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @tom1234tom123
        last edited by sdetweil

        @tom1234tom123 every module declares its own way to resize elements… nothing does everything for a module…

        you have to read the README to learn about the documented CSS classes you can add in custom.css to change the elements size… some modules don’t document what classes they use, and then u will have to read the code for each module u want to modify…

        some modules don’t use any specific classes, so then u have to add some to the code and then set their values in custom.css

        clock doesn’t document the classes

        in digital mode (numbers) the classes used are
        // Style Wrappers
        dateWrapper.className = “date normal medium”;
        timeWrapper.className = “time bright large light”;
        secondsWrapper.className = “dimmed”;
        weekWrapper.className = “week dimmed medium”;

        in analog mode (clock with hands)
        the classes used are in the clock_styles.css file

        | edit: I stand corrected, see the post below about using transform!..

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • StoffbeuteluweS Offline
          Stoffbeuteluwe Project Sponsor @tom1234tom123
          last edited by

          @tom1234tom123 there is a way to make it bigger or smaller with your keyboard by pressing shift and + or -

          but I’m not sure 🤔

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @Stoffbeuteluwe
            last edited by

            @Stoffbeuteluwe thats the whole screen

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            StoffbeuteluweS 1 Reply Last reply Reply Quote 0
            • StoffbeuteluweS Offline
              Stoffbeuteluwe Project Sponsor @sdetweil
              last edited by

              @sdetweil yes that’s for the whole screen

              1 Reply Last reply Reply Quote 0
              • A Offline
                airart
                last edited by

                add a CUSTOM.CSS file in home/pi/MagicMirror/css/
                each module name (as .clock , .weather ecc)
                this scale modules but it not move them

                body  {
                transform:scale(1.0);
                }
                .clock {
                transform:scale(1.0);
                }
                
                S 1 Reply Last reply Reply Quote 1
                • S Offline
                  sdetweil @airart
                  last edited by

                  @airart nice!

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  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