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.

    Resize custom or main modules

    Scheduled Pinned Locked Moved Development
    24 Posts 6 Posters 35.3k Views 10 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.
    • bokifideB Offline
      bokifide
      last edited by paviro

      Hey,

      I added a bunch of modules to my mirror and I’m finding it hard to pick which ones I want to get rid of to make it all fit… I’m just wondering if there’s a way to change the size of the modules so they don’t take up so much space. :) let me know

      Mich had added the following:

      If you just put the following items in your css/custom.css you can change the font sizes of the mirror by adjusting the values.

      .xsmall {
        font-size: 15px;
        line-height: 20px;
      }
      
      .small {
        font-size: 20px;
        line-height: 25px;
      }
      
      .medium {
        font-size: 30px;
        line-height: 35px;
      }
      
      .large {
        font-size: 65px;
        line-height: 65px;
      }
      
      .xlarge {
        font-size: 75px;
        line-height: 75px;
        letter-spacing: -3px;
      }
      

      But I’m quite new to this… Once you add the values above in css/custom.css how and where do I adjust the values as mentioned above??

      Regards,

      Boki

      Note from Moderator: Please use Markdown on code snippets for easier reading.

      1 Reply Last reply Reply Quote 0
      • KirAsh4K Offline
        KirAsh4 Moderator
        last edited by

        The answer is right there in those numbers. Those numbers represent the size of the fonts, in the various different sections. So if 15px is too large, reduce it to perhaps 10px, then reload your mirror and see what changed and how. The line-height is exactly what it says, the height of two identical lines. What I mean with that is, if there’s a line of text that’s wrapping to a second one, line-height will determine how far apart in vertical space they will be.

        So play with the values, one by one. Don’t try to change it all at once because then it’ll be hard to determine which one changed what.

        A Life? Cool! Where can I download one of those from?

        shreyashS 1 Reply Last reply Reply Quote 0
        • bokifideB Offline
          bokifide
          last edited by

          Hey thanks for the reply!

          I understand that part, what I was wondering is once I actually add those values in custom.css how do I link it to the specific module that I want?

          If its newsfeed lets say, do I change or add something in config.js?
          Or do I change or add something to in the newsfeed.js, that’s in the module’s folder?
          Or do I copy the custom.css file to the folder itself and then somehow make reference to it?

          Simply… what do I do after I add the above value to custom.css to tell it what I want to change

          Sorry for being a newb. 0.o I know this is an obvious answer for most of you.

          Thanks for your help :)

          1 Reply Last reply Reply Quote 0
          • KirAsh4K Offline
            KirAsh4 Moderator
            last edited by KirAsh4

            Those CSS rules will affect all the modules, as all modules use them. If you only want to affect one single module, then you need to change the rules to point to the specific module. Let’s say you want the text smaller on the newsfeed, then you need to look at the actual HTML being created to get the class named being used:

            <div id="module_8_newsfeed" class="module newsfeed newsfeed" style="transition: opacity 1.25s; opacity: 0; position: static;">
              <div class="module-content">
                <div>
                  <div class="light small dimmed">ESPN - Top News, 4 minutes ago:</div>
                  <div class="bright medium light">Georgia RBs Chubb, Michel still iffy for opener</div>
                </div>
              </div>
            </div>
            

            Now you can see that the rules that affect the text, 'light small dimmed' and 'bright medium light' are all contained within the main class 'module newsfeed newsfeed' (on the very first line.)

            Using a bit of CSS juju, doing this:

            .newsfeed .medium {
              font-size: 18px;
            }
            

            … will make the text of the article headline smaller than the default '30px'. And this will only affect the newsfeed module. All the others also using the 'medium' rule will be unaffected.

            A Life? Cool! Where can I download one of those from?

            D 1 Reply Last reply Reply Quote 0
            • bokifideB Offline
              bokifide
              last edited by

              Awesome! Thanks for explaining that :) I’ll give it a try now.

              1 Reply Last reply Reply Quote 0
              • bokifideB Offline
                bokifide
                last edited by

                Hey so I was testing out the custom.css values to see how it affects the magic mirror and I’m not getting any difference for some reason =/.

                Before
                alt text

                The change (changed the px values to be way lower than what was shown in the original paste above)
                alt text

                After the above change
                alt text

                I was hoping changing those values would mean that I could make it look clean enough to not change the size of specific modules, but I seem to still be missing something :( .

                Regards,
                Boki

                1 Reply Last reply Reply Quote 0
                • KirAsh4K Offline
                  KirAsh4 Moderator
                  last edited by

                  '.small' affects the calendar, weather forecast modules, and newsfeed sourceTitle
                  '.medium' affects the date (only), current weather EXCEPT the temperature display, newsfeed article title
                  '.large' affects the time display and temperature from current weather

                  I’m sure there are others I’ve missed.

                  Those are all 'master' rules, affecting all those modules. If you want to only change a specific module, you have to follow the steps I mentioned above.

                  A Life? Cool! Where can I download one of those from?

                  1 Reply Last reply Reply Quote 0
                  • zombi27Z Offline
                    zombi27
                    last edited by

                    I know it!

                    Tried the same yesterday, and found a “bug” :)
                    You inserted your code inside the body { } section (like i did), wich is not working…
                    Just erase the body { } from the custom.css and paste the code in the empty file :)

                    @MichMich, @KirAsh4: Is the body { } section a leftover from an older version maybe?

                    MichMichM 1 Reply Last reply Reply Quote 0
                    • MichMichM Offline
                      MichMich Admin @zombi27
                      last edited by

                      @zombi27 Nope, it’s an example to show where your CSS must go … ;)

                      I think there is a limit in how far we should spoon feed the users. ;)

                      1 Reply Last reply Reply Quote 0
                      • zombi27Z Offline
                        zombi27
                        last edited by

                        okay :D The body section confused me too, so maybe it’s better to keep it empty? just a comment “place css code here?”

                        i could send a pull request? would be my first one :D or how could this be done? totally new to github…

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