MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

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.

    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;
    .MMM-M2-Pimatic .module-content .flex-item {
      flex-direction: column;
      /*margin: auto;*/
    .region.left .MMM-M2-Pimatic .flex-container, .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, .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, .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, .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;

  • Module Developer

    @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

  • Module Developer

    @strawberry-3.141 I didn’t want to spoil the fun of learning it 🙂 😛

  • @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!

  • Module Developer

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