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 540.5k 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.
    • BerkSmash1984B Offline
      BerkSmash1984
      last edited by BerkSmash1984

      Awesome module! Question for you: I am using MMM-Wallpaper and some of the text can be hard to read during certain wallpapers. I looked in the MMM-OpenWeatherForecast.css file but did not see an obvious place to change the color for the text highlighted in the red boxes below. I would like to set them to white (#FFFFFF). Can you tell me where in that css to set that? Thanks for your help!

      9b26e7ea-ca02-4335-909f-bbf64836c8ee-image.png

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

        @BerkSmash1984 I do not know … but you can find out thru using the developers console

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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @sdetweil
          Thank you! I will dig into it via the dev console

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