Read the statement by Michael Teeuw here.
Need help from an CSS expert!
-
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.
.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; }
-
@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.
-
@Mr.Sponti I guess changing the flex-direction from column to row of the container should be a good starting point
-
@strawberry-3.141 I didn’t want to spoil the fun of learning it :) :P
-
@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:That’s was exactly what I was looking for!
-
@Mr.Sponti Good to hear that you have what you were looking for :D Looks nice!