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-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast

    Scheduled Pinned Locked Moved Utilities
    256 Posts 55 Posters 539.8k Views 57 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.
    • BKeyportB Offline
      BKeyport Module Developer @BerkSmash1984
      last edited by BKeyport

      @BerkSmash1984

      It uses the defaults from MagicMirror for grey text. I use:

      root {
      	--color-text: #DDD;
      	--color-text-dimmed: #666;
      	--color-text-bright: #fff;
            --color-background: #000;
      	
      }
      
      /* Originals: 
        --color-text: #999;
        --color-text-dimmed: #666;
        --color-text-bright: #fff;
        --color-background: #000;
      /*

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

      BKeyportB BerkSmash1984B 3 Replies Last reply Reply Quote 0
      • BKeyportB Offline
        BKeyport Module Developer @BKeyport
        last edited by

        Anyone know how to get the entire table to center within the region? I don’t want to center the contents, only the position of the table being built by the app.

        thanks!

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

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

          @BKeyport

          position: relative
          either use margin or x and width, margin is easier

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @sdetweil
            last edited by

            @sdetweil the problem is that I can’t find the right CSS class to apply it to.

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

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

              @BKeyport did u use the dev console to examine the content? click on the element u mean to adjust?
              https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1679584458559

              may not be a class, so you would have to select more … just have to be careful if the table is in a div, in a div… then its ‘size’ and position are relative to the parent (div) …

              .modulename table {
              position: relative
              ...
              ...
              }
              

              this is my goto for figuring out the selector ( the thing before the { )
              https://www.w3schools.com/cssref/css_selectors.php

              look at the css for the form in MMM-Config

              https://github.com/sdetweil/MMM-Config/blob/main/webform.css

              selector doesn’t have to start with a class…
              note in the cheat sheet its ALWAYS selects ALL elements that match

              Sam

              How to add modules

              learning how to use browser developers window for css changes

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

                @BerkSmash1984 FYI, there’s more ways to make things easier to read - fade the background - or add a background to the modules themselves.

                Here’s how to add a background to the modules:

                the .5 is the opacity in this case, I’ve got it set to 50% visible.

                .module {
                  background-color: rgba(0,0,0,.5); 
                }
                

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

                BKeyportB 1 Reply Last reply Reply Quote 0
                • BKeyportB Offline
                  BKeyport Module Developer @sdetweil
                  last edited by

                  @sdetweil found it. Missing a * on the opening CSS when I did it…

                  .MMM-OpenWeatherForecast * {
                  	box-sizing: border-box;
                  	margin-left: auto;
                  	margin-right: auto;
                  }
                  

                  does it, for anyone else that runs across this.

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

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

                    @BerkSmash1984 I’ve also found, in the documentation for MMM-Wallpaper, a “filter” option - If you don’t want to put a background on the modules, you can use this to improve readability.

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

                    1 Reply Last reply Reply Quote 1
                    • BerkSmash1984B Offline
                      BerkSmash1984 @BKeyport
                      last edited by BerkSmash1984

                      @BKeyport
                      Thanks for the responses! The filter for MMM-Wallpaper worked perfectly (I actually had values specified already but must have forget when I first setup the module). I dropped the grayscale and brightness down to 0.2 and that seems to be the sweet spot for ensure the default text color is legible, regardless of the background.

                      Thanks again for your help, I really appreciate it!

                      1 Reply Last reply Reply Quote 0
                      • C Offline
                        chris1971
                        last edited by chris1971

                        I started a new setup of and the module was working. After installation of other modules (e.g. google maps) the module isn’t working anymore. I tried to delete and reinstall and got following info:

                        Pi@raspberrypi:~/MagicMirror/modules/MMM-OpenWeatherForecast $ npm install

                        npm WARN old lockfile

                        npm WARN old lockfile The package-lock.json file was created with an old version of npm,

                        npm WARN old lockfile so supplemental metadata must be fetched from the registry.

                        npm WARN old lockfile

                        npm WARN old lockfile This is a one-time fix-up, please be patient…

                        npm WARN old lockfile

                        added 4 packages, and audited 391 packages in 57s

                        1 package is looking for funding

                        run npm fund for details

                        46 vulnerabilities (3 low, 15 moderate, 23 high, 5 critical)

                        To address all issues, run:

                        npm audit fix

                        Run npm audit for details.

                        Any recommendations?

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 17
                        • 18
                        • 19
                        • 20
                        • 21
                        • 25
                        • 26
                        • 19 / 26
                        • 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