My display so far...

[j.e.f.f]

@cowboysdude In my case, I’ve also changed the HTML markup. It’s difficult to move things around in the CSS when the visual elements are marked up with tables. So in many cases the markup has been changed significantly – especially in the sports modules – so that I was free to position things as I wished.

In some case using tables makes sense. For example the weather forecast is tabular data, so using a table to present the information is appropriate. But when you use tables, your layout is pretty much fixed to be in a table format, and the information will always be presented in the order that it is marked up. For example, for the sports modules, I wanted the visiting team’s scores first (i.e. on the left) and the home team’s score second (on the right). The NHL module had this reversed. I also wanted to hide the scores when the game hadn’t yet started. So the logos are marked up first, then the game status. Based on the status, I decide whether to markup the scores. So the markup looks like this:

<div>
  <img src="modules/MMM-NHL/icons/NSH.svg" class="team-logo home" />
  <img src="modules/MMM-NHL/icons/STL.svg" class="team-logo visitor" />
  < span class="status in-progress">
    < span class="live time">13:45< /span>
    < span class="period">3< sup>RD< /span>
  < /span>
  < span class="score home">2< /span>
  < span class="score visitor">1< /span>
</div>

Elements are written in this order:

1. Home Team’s logo
2. Visiting Team’s logo
3. Game status
4. Home Team’s score
5. Visiting Team’s score

But with the CSS, I’m able to position them in this order:

1. Visiting Team’s logo
2. Visiting Team’s score
3. Game status
4. Home Team’s score
5. Home Team’s logo

Scores and logos are positioned relative the their respective left and right edges, while the status is centered. So this layout will adapt to changing container widths. And if I wanted to swap the display to have home team on the left, and visitor on the right, it’s a simple CSS change, with no need to touch the markup.

So it works out better to render each piece as its own HTML element (e.g.: div, span, p, img, etc), and then position them using CSS. This gives you WAY more flexibility. Maybe the way forward here is to work with the module devs to change their markup to something that lends itself to more flexible CSS styling.

---

P.S. Does anyone know how to make span elements show up in markdown? I had to put spaces between the < character and span>, otherwise they don’t show up in the code block. Also have the same problem with the class name on the outer div. There should class="box-score" on that element.

[strawberry 3.141]

@j.e.f.f you can create a fork of the module and push your changes to it then everyone can clone your fork

[j.e.f.f]

@strawberry-3.141 Thanks! I’ll see if I can figure that out.

[j.e.f.f]

OK Here’s my first crack at this. I’ve forked mrx-work-traffic to make MMM-MyCommute.

[card:jclarke0000/MMM-MyCommute]

https://github.com/jclarke0000/MMM-MyCommute

Will work on the others soon.

[j.e.f.f]

…and MMM-MyWeather:

[card:jclarke0000/MMM-MyWeather]

https://github.com/jclarke0000/MMM-MyWeather

[ring23]

Awesome! Do you plan on making a module for the Sports Scores? If not, can you PM me the files?

[j.e.f.f]

@ring23 I actually plan on making a new sports module that combines all the sports into one.

[cowboysdude]

@ring23 There are already several…

[j.e.f.f]

Here’s my calendar app. Configuration is identical to the default calendar app. if you clone this, then change your calendar config to MMM-MyCalendar, it should just work.

[card:jclarke0000/MMM-MyCalendar]

https://github.com/jclarke0000/MMM-MyCalendar.git

[j.e.f.f]

I should mention that I have a few rules in my custom CSS that apply to all modules. You won’t get my exact same visual style with just these modules alone. Add whichever rules you want from those below into your custom.css file:

/* Limit the width of the left and right columns to 300px */
.region.right .module-content,
.region.left .module-content {
  max-width: 300px;
}

/* Increase vertical spacing of text in table cells */
table td {
  line-height: 1.75;
}

/* Allows styling of row elements in tables.  You need this for the next rule */
table.small {
  border-collapse:collapse;
}

/* Add an underline to table rows - also requires the rule above this one */
table tr {
  border-bottom: solid 1px #222;
}

/* blue colour styling for module headers */
.module-header {
  color: #82bae5;
  border-bottom-color: #82bae5;
  font-size: 15.5px;
  font-family: "Roboto";
}