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.

    How to convert weatherforecast disaplay

    Scheduled Pinned Locked Moved Troubleshooting
    9 Posts 7 Posters 2.9k Views 8 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.
    • M Offline
      mkastern @nobita
      last edited by

      @nobita Did you ever get this figured out?

      1 Reply Last reply Reply Quote 0
      • kruemelK Offline
        kruemel
        last edited by

        I did not tried but with MMM-MyWeather you can configure horizontal.
        Maybe it’s what you’r looking for :-)

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          mkastern @kruemel
          last edited by

          @kruemel - I have used that version to display a horizontal table of the extended forecast, but it isn’t in a format that looks as nice as the above picture. I am considering modifying a different weather module that has better formatting, but was checking to see if someone else has already gone through that effort first.

          1 Reply Last reply Reply Quote 0
          • kruemelK Offline
            kruemel @nobita
            last edited by kruemel

            @mkastern Maybe you are still interested.
            I tested alot for an idea i had and now i just modified the weatherforecast.css to get this result (top left):
            0_1524943425646_screen-test.PNG

            Made this changes:

            td { 
              display: block;
              padding-right: 25px
            }
            tr { display: inline-block;}
            
            .weatherforecast .day {
              padding-left: 5px;
            }
            
            .weatherforecast .weather-icon {
              padding-left: 5px;
            }
            
            .weatherforecast .max-temp {
              
            }
            
            .weatherforecast .min-temp {
             
            }
            
            

            But keep in mind, after an update of MM, your changes get overwritten because it’s an integrated module!

            1 Reply Last reply Reply Quote 1
            • R Offline
              redeyes
              last edited by

              Hi

              I managed to created something similar with the help of chatgpt let me know if interested

              15e9e8d1-a89a-4587-941f-725956142c84-image.png

              M E 2 Replies Last reply Reply Quote 0
              • M Offline
                miguelcartagena @redeyes
                last edited by

                @redeyes can you please share the css/js configuration you have? I’m interested on having a horizontal bar for weather forecast just like yours.

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

                  Can you please let us know which format are you trying to covert the weather forecast?

                  1 Reply Last reply Reply Quote 0
                  • E Offline
                    Eli @redeyes
                    last edited by

                    @redeyes wow, looks good!
                    I would also be interested in that changes. Is that uploaded somewhere already?

                    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 Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy