My display so far...

j.e.f.f

@cowboysdude PM me for the files if you want them. This forum won’t let me attach a ZIP file.

-Jeff

pjkoeleman

@j.e.f.f
How did you change the calendar module (custom CSS-file) or which calendar module did you use, because I like your layout.

j.e.f.f

@pjkoeleman I actually modified the HTML markup in the js file in addition to writing custom CSS. I can share what I did in order to make it work. PM me.

twosix

This post is deleted!

j.e.f.f

@twosix For traffic I used mrx-work-traffic, but I made some js modifications, both to get it working, and to add the travel mode options (e.g.: biking, driving, transit, walking). For music, I’m using MMM-Sonos. I modified the JS to comment out much of the information being supplied to the display, and to reformat the remaining HTML such that it could be styled like you see in my photo.

laylaykom

Hey!! I want to that zip what you change the files too. Can you PM to me?

j.e.f.f

Wow! I did not expect so much interest! So I’m going to put all of my stuff on Github and you’ll be able to pick and choose what you want to use.

Just know that the changes I made to the modules were just supposed to be for my use, and are in no way complete as far as a robust code base goes. For example I haven’t put anything in place for translations and any time functions just assume Eastern time. They may or may not work perfectly for you out of the box.

In any case, thanks for the interest!
-Jeff

cohron

@j.e.f.f why not add it to github and make it part of the master so updates won’t overwrite your work.?

j.e.f.f

@cohron well that’s up to the original authors of the respective modules. I don’t want to step on their toes – they’ve built their modules to suit their vision. My changes were tweaks I wanted for me. So I’m thinking keeping it separate is the better course of action here.

That said, I’m not an expert with Github, so maybe there’s a way to do what you suggest without changing the original modules?

cowboysdude

@j.e.f.f You know if it’s css there has to be a way to include more than one css file in a module… something I think I’ll look into…

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:

Home Team’s logo
Visiting Team’s logo
Game status
Home Team’s score
Visiting Team’s score

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

Visiting Team’s logo
Visiting Team’s score
Game status
Home Team’s score
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";
}