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.6k 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.
    • N Offline
      nobita
      last edited by

      I would like to convert weatherforecast (from Default module) form vertical to Horizontal like the photo.
      0_1494842981392_New Picture.jpg

      someone help me to convert, Thanks so much

      M kruemelK 2 Replies Last reply Reply Quote 0
      • 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