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.

    Need help from an CSS expert!

    Scheduled Pinned Locked Moved Development
    6 Posts 3 Posters 4.8k Views 3 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.
    • Mr.SpontiM Offline
      Mr.Sponti
      last edited by

      I’m a complete novice to CSS and momentary it’s all Greek for me. I would like to change an existing style sheet provided by BenRoe (MMM-FHEM) for my own modul, but it would take me days to find the right code to change it to the layout below. An expert would presumably spend only a few minutes to create the necessary css file.

      Below the existing display and style sheet of temperature values plus the layout I would like to realize.

      Any hint how to start or assistance would be highly appreciated!

      Thanks in advance.

      alt text

      .MMM-M2-Pimatic .flex-container {
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content:flex-end;
      }
      
      .MMM-M2-Pimatic .module-content .flex-item {
        flex-direction: column;
        /*margin: auto;*/
      }
      
      .region.left .MMM-M2-Pimatic .flex-container,
      .region.center .MMM-M2-Pimatic .flex-container,
      .region.right .MMM-M2-Pimatic .flex-container {
        flex-direction: column;
        -webkit-flex-direction: column;
        align-items: flex-start;
        -webkit-align-items: flex-end;
        max-width: 300px;
      }
      
      .region.left .MMM-M2-Pimatic .flex-container .flex-item > div,
      .region.center .MMM-M2-Pimatic .flex-container .flex-item > div,
      .region.right .MMM-M2-Pimatic .flex-container .flex-item > div {
        flex-direction: column;
        display: inline-block;
        min-width: 70px;
      }
      
      .MMM-M2-Pimatic .flex-item .title {
        border-bottom: 1px solid #666;
      }
      
      .region.left .MMM-M2-Pimatic .flex-item .title,
      .region.center .MMM-M2-Pimatic .flex-item .title,
      .region.right .MMM-M2-Pimatic .flex-item .title{
        border-bottom: none;
      }
      
      .MMM-M2-Pimatic .flex-item .value {
        display: inline-block;
        margin: 10px 5px;
      }
      
      .region.left .MMM-M2-Pimatic .flex-item .value,
      .region.center .MMM-M2-Pimatic .flex-item .value,
      .region.right .MMM-M2-Pimatic .flex-item .value{
        margin: 0;
        font-size: 1em;
      }
      
      .MMM-M2-Pimatic .value i {
        margin-right: 8px;
        font-size: 0.75em;
      
      }
      
      tosti007T strawberry 3.141S 2 Replies Last reply Reply Quote 0
      • tosti007T Offline
        tosti007 Module Developer @Mr.Sponti
        last edited by tosti007

        @Mr.Sponti odd that nobody has said something here yet. Anyways a hint on how to start is read a tutorial about flex boxes, since he is using that. This is in my opinion always a good one. Hope this helps! Let me know if you are able to figure it out on your own or if you need my help :)

        Note: I am no expert, but I do know my way around in css.

        If there is anything don't hesitate to contact me!
        ProfileSwitcher, TouchNotifications

        1 Reply Last reply Reply Quote 0
        • strawberry 3.141S Offline
          strawberry 3.141 Project Sponsor Module Developer @Mr.Sponti
          last edited by

          @Mr.Sponti I guess changing the flex-direction from column to row of the container should be a good starting point

          Please create a github issue if you need help, so I can keep track

          tosti007T 1 Reply Last reply Reply Quote 0
          • tosti007T Offline
            tosti007 Module Developer @strawberry 3.141
            last edited by

            @strawberry-3.141 I didn’t want to spoil the fun of learning it :) :P

            If there is anything don't hesitate to contact me!
            ProfileSwitcher, TouchNotifications

            1 Reply Last reply Reply Quote 0
            • Mr.SpontiM Offline
              Mr.Sponti
              last edited by

              @tosti007 , @strawberry 3.141 - ok, you all right, it is not a failure to investigate a bit time to consult the internet and to learn new things!
              I found and implemented a solution based on a table definition:

              alt text

              That’s was exactly what I was looking for!

              tosti007T 1 Reply Last reply Reply Quote 2
              • tosti007T Offline
                tosti007 Module Developer @Mr.Sponti
                last edited by

                @Mr.Sponti Good to hear that you have what you were looking for :D Looks nice!

                If there is anything don't hesitate to contact me!
                ProfileSwitcher, TouchNotifications

                1 Reply Last reply Reply Quote 1
                • 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