MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Setting font sizes for HelloWorld, Calendar, and headers

    Development
    3
    3
    135
    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.
    • P
      pcmofo last edited by

      I’m looking at setting font sizes for various elements. Everything looked great using a Pi and I upgraded to a 4k monitor so I’ve been readjusting everything.

      Green arrows are title headers for modules I’d like to enlarge.

      For the Calendar I’m using MMM Ext2. I can adjust the date headers but I can’t seem to adjust the individual event font (red arrow)

      Lastly the HelloWorld module at the top (purple arrow) should be larger as well.

      Any help adjusting these would be greatly appreciated. I’ve attached relevant screen shots of my CSS and configs.
      Screen Shot 2023-02-22 at 10.02.59 PM.jpg
      Screen Shot 2023-02-22 at 9.59.00 PM.png
      Screen Shot 2023-02-22 at 9.58.45 PM.png
      Screen Shot 2023-02-22 at 9.58.15 PM.png
      Screen Shot 2023-02-22 at 9.57.28 PM.png

      S BKeyport 2 Replies Last reply Reply Quote 0
      • S
        sdetweil @pcmofo last edited by

        @pcmofo see
        https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1677124786771

        on how to use the browser debugger to find elements and their styles and use that to set values in custom.css

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • BKeyport
          BKeyport Module Developer @pcmofo last edited by

          @pcmofo Default modules, and compliant other modules use the font settings in the root from main.css.

          You can copy that over to custom.css and adjust as needed to affect the base.

          The "E" in "Javascript" stands for "Easy"

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy