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

MMM-CountUP (COVID19 example)

Scheduled Pinned Locked Moved Utilities
46 Posts 6 Posters 10.9k Views 6 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
    plainbroke
    last edited by Jun 12, 2025, 5:44 PM

    Anyone know how to make the header font bigger.
    I have the rest of it figured out and working just can not find the Header part.
    This is what I have tried.

      color: orange;
      font-size: 60px;
    }
    

    AND

      color: orange;
      font-size: 60px;
    }
    

    Slow learner. But trying anyways.

    S 1 Reply Last reply Jun 12, 2025, 5:46 PM Reply Quote 0
    • S Online
      sdetweil @plainbroke
      last edited by Jun 12, 2025, 5:46 PM

      @plainbroke module header?

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      P 1 Reply Last reply Jun 12, 2025, 8:30 PM Reply Quote 0
      • P Offline
        plainbroke @sdetweil
        last edited by Jun 12, 2025, 8:30 PM

        @sdetweil
        Sorry, brain fart.
        Yes module header.
        Did you find something?
        I looked for an hour and then tried these.
        But no go…
        It is still really little and gray.

        .countUP tr td.header {
          color: orange;
          font-size: 60px;
        }
        .countUP .header {
          color: orange;
          font-size: 60px;
        }
        

        Slow learner. But trying anyways.

        S 1 Reply Last reply Jun 12, 2025, 8:38 PM Reply Quote 0
        • S Online
          sdetweil @plainbroke
          last edited by Jun 12, 2025, 8:38 PM

          @plainbroke after all this time???
          again the dev window elements tab would have shown you this in seconds

          elements tab, click the arrow, navigate over the web page to the header you want to change, click
          the html tree is there and you can see the classes etc assigned
          you can test the styles in the upper right window, it will prompt you thru it

          font-size: 
          
          .modulename .module-header {
          
          styles
          
          }
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          P 1 Reply Last reply Jun 12, 2025, 8:56 PM Reply Quote 0
          • P Offline
            plainbroke @sdetweil
            last edited by Jun 12, 2025, 8:56 PM

            @sdetweil
            Yea I know, but I can not for the life of me see what you see.
            It is so frustrating for me, to not be able to do the dev window elements.
            It looks like Chinese to me…
            I will have to see if a bigger screen helps.
            I will plug my laptop into the 42 inch tv screen and see if that helps any…
            Plus with pages running 40+ modules it takes so long to come back around, I sometimes just give up… and try what has worked in the past…
            Thanks for you patience with me.

            Slow learner. But trying anyways.

            P 1 Reply Last reply Jun 12, 2025, 9:17 PM Reply Quote 0
            • P Offline
              plainbroke @plainbroke
              last edited by Jun 12, 2025, 9:17 PM

              @sdetweil
              It shows me nothing but dynamic weather in elements window. Then a bunch of .js
              I am guessing I will have to stop all other modules except the one I want look at, to figure this out on my own.
              Is that correct?

              Slow learner. But trying anyways.

              S 1 Reply Last reply Jun 12, 2025, 9:38 PM Reply Quote 0
              • S Online
                sdetweil @plainbroke
                last edited by sdetweil Jun 12, 2025, 9:40 PM Jun 12, 2025, 9:38 PM

                @plainbroke
                im not quite sure I understand

                using the sample config
                I used the arrow, to navigate to the header… (pointer in left pink box)
                it opened the html page to that element (middle pink box, you can see the class=module-header)
                you can test the styles in the top right pink box
                Screenshot at 2025-06-12 16-32-23.png

                if you have something that updates frequently, (clock tick on 1 second)
                you can temp disable second (displaySeconds:false in clock config) hit f5 to refresh that page the it won’t update except on minute (as an example)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                P 1 Reply Last reply Jun 12, 2025, 9:54 PM Reply Quote 0
                • P Offline
                  plainbroke @sdetweil
                  last edited by Jun 12, 2025, 9:54 PM

                  @sdetweil
                  Ok I found that and put it in my custom.css

                  .CountUp .module_header{
                  font-size:  65px;
                  }
                  

                  With no change.
                  What am I not seeing or doing wrong with my code. ???
                  Once I finally find the answer it did not work…
                  I am burnt out today. I will attack it again tomorrow.

                  I have learned how to enlarge gif files. and If they put a css file I pretty much can find the correct thing to enlarge the fonts i want then. but this does not work well for me I click on the thing I want highlighted and it does for a split second then goes away never showing anything different in the html side… Maybe I should look at this from an html editor side of the file and I can see it then… Probably not able to do that though… I will keep trying to figure it out each time before I bug the forum for answers.

                  Slow learner. But trying anyways.

                  S 2 Replies Last reply Jun 12, 2025, 9:56 PM Reply Quote 0
                  • S Online
                    sdetweil @plainbroke
                    last edited by sdetweil Jun 12, 2025, 9:56 PM Jun 12, 2025, 9:56 PM

                    @plainbroke said in MMM-CountUP (COVID19 example):

                    .CountUp

                    module name is MMM-CountUp

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    P 1 Reply Last reply Jun 12, 2025, 10:04 PM Reply Quote 0
                    • S Online
                      sdetweil @plainbroke
                      last edited by Jun 12, 2025, 10:01 PM

                      @plainbroke you can see the module name in the html too, in green box

                      css has to match

                      . means class=
                      # means id=
                      no prefix means html element, table, p, img, div, span …
                      stuff to the left of the { is the selector clause
                      it ‘selects’ the elements the styles between the {} apply to

                      Screenshot at 2025-06-12 16-32-23.png

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 4 / 5
                      4 / 5
                      • First post
                        33/46
                        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