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

Setting font sizes for HelloWorld, Calendar, and headers

Scheduled Pinned Locked Moved Development
3 Posts 3 Posters 567 Views 3 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.
  • P Offline
    pcmofo
    last edited by Feb 23, 2023, 3:40 AM

    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 B 2 Replies Last reply Feb 23, 2023, 4:01 AM Reply Quote 0
    • S Offline
      sdetweil @pcmofo
      last edited by Feb 23, 2023, 4:01 AM

      @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

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • B Offline
        BKeyport Module Developer @pcmofo
        last edited by Feb 23, 2023, 5:45 AM

        @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
        1 / 1
        • First post
          2/3
          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