MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Clock and current weather horizontally

    Custom CSS
    3
    8
    496
    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.
    • J
      JasonInOttawa last edited by

      I would like to show the clock and current weather horizontally in the bottom left as follows, and was hoping for pointers on how to do this in the custom.css file. Thanks!

      09:44 icon 1C

      Setting them both to bottom_left results in

      09:44
      icon 1C

      A 1 Reply Last reply Reply Quote 0
      • A
        ashishtank @JasonInOttawa last edited by

        @JasonInOttawa You mean like below ?

        28bfddac-8f61-4885-8e63-2e0c2c3bffff-image.png

        1 Reply Last reply Reply Quote 0
        • J
          JasonInOttawa last edited by JasonInOttawa

          @ashishtank I believe you’re showing a clock followed by a calendar. If so, yes, that’s what I’d like, except with a clock and current weather. Thanks very much for your reply.

          J A 2 Replies Last reply Reply Quote 0
          • J
            JasonInOttawa @JasonInOttawa last edited by

            This seems to work

            .currentweather {
              display:inline-block;
              margin: 2px;
              zoom:60%;
            }
            
            .clock {
              display:inline-block;
              margin: 2px;
            }
            
            A 1 Reply Last reply Reply Quote 0
            • A
              ashishtank @JasonInOttawa last edited by

              @JasonInOttawa yes, Indeed I was only giving example to understand the requirement. you can do it by using custom.css file. Add below code to show clock and current weather side by side.

              .clock
              {
              	float: left;
              }
              .currentweather
              {
              	float: left;
              	padding-left: 20px; //Adjust this for left spacing between both modules
              }
              
              

              below should be output.

              5fc505aa-4534-42dd-8445-b056090521d0-image.png

              1 Reply Last reply Reply Quote 0
              • A
                ashishtank @JasonInOttawa last edited by

                @JasonInOttawa yes there are multiple ways to achieve the same 🙂 We both posted reply at same time !

                J 1 Reply Last reply Reply Quote 0
                • J
                  JasonInOttawa @ashishtank last edited by

                  @ashishtank Thanks again! I did notice one difference: the inline-block keeps the bottoms lined up

                  bottom line up.png

                  and the float puts the second element a bit higher:

                  up to the left.png

                  It all depends on which effect you prefer.

                  A 1 Reply Last reply Reply Quote 0
                  • A
                    ashishtank @JasonInOttawa last edited by

                    @JasonInOttawa May be float is doing this because you are not showing week text as header ? In my screenshot they are aligned on top. Any ways both are on user choice ! 🙂

                    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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy