I have dreamed of building a digital calendar since I first saw a project a couple of years back. The only thing I don’t always want to see my ugly mug and I’d rather see pictures and use it as a display to replace a calendar.

I started toying with a “free” laptop screen. $60 later in drivers that never worked I gave up and went with an open box monitor from bestbuy for $100. I started putting together how much I would be spending to build the additional hardware and then having to mount. When really I could buy a monitor and wall mount and it would be all set.

Everything else came together really well. The biggest downfall just mounting a monitor to the wall is where do you hide the cords. I found they make VESA mounts to attach micro computers to which wouldn’t be possible without. But it is also my biggest pet peeve of things not being clean.

Hardware list with links:

• Raspberry Pi 3B+
• LG-22MN430H-B https://www.bestbuy.ca/en-ca/product/lg-21-5-fhd-75hz-5ms-gtg-ips-led-freesync-gaming-monitor-22mn430h-b-black/14420211?cmp=knc-s-71700000055264709&gclid=Cj0KCQiA7YyCBhD_ARIsALkj54okJp2X4QYY6xbwWsdXBt_vXmeMJ2ID8zZ8DP-R8Nj4Gid3wW9BfmkaAiS7EALw_wcB&gclsrc=aw.ds
• 19v Power adapter for LG Monitor (the one that comes with the monitor is too big to fit behind. https://www.amazon.ca/gp/product/B07CNJYXPX/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
• 5v genuine apple iPad charger (the official raspberry pi adapter again is too big. I know what I should use but I couldn’t get it to fit and I have had no power warnings or issues for a week of it running)
• 3 plug flush mount, fabric wrapped extension cord. https://www.amazon.ca/dp/B07PQYN4K4/ref=cm_sw_r_cp_api_i_MJ0PW2DJ9J72KEY50F5D?_encoding=UTF8&psc=1
• Amazon tilting monitor wall mount. https://www.amazon.ca/gp/product/B01KBEO54Q/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
• Micro Computer Vesa Mount (use to mount everything on it) https://www.amazon.ca/gp/product/B07KB4YWQS/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
• 90degree HDMI cable https://www.amazon.ca/gp/product/B079JPH1B4/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
• White zip ties

The modules that I am using

Default

• clock
• calendar
• weather
• weather (copied and running twice for CSS)
• newsFeed

Modules

• MMM-NowPlayingOnSpotify
• MMM-MLB
• MMM-MLB (copied and running twice for CSS)
  *MMM-BackgroundSlideshow

CSS was my biggest obstacle but I was able to slowly figure my way around. For the weather and the MLB I had to run two instances so the background would work properly without a gap between the two modules. I had a hard time getting the bottom CSS to work with margins and eventually it just worked.

Everything has been running for a week before I mounted it and it seems to go great. I need to fix the CSS on the MLB scoreboard for the colour, and I noticed that my one calendar isn’t showing the symbol and the date is off for it.

Thank you to everyone on the forum who helped me on my way. I started with knowing hardly anything about a raspberry pi, css, or even really building using script. I still know there is a ton to learn and I look forward to my next project.

I have dreamed of building a digital calendar since I first saw a project a couple of years back. The only thing I don’t always want to see my ugly mug and I’d rather see pictures and use it as a display to replace a calendar.

I started toying with a “free” laptop screen. $60 later in drivers that never worked I gave up and went with an open box monitor from bestbuy for $100. I started putting together how much I would be spending to build the additional hardware and then having to mount. When really I could buy a monitor and wall mount and it would be all set.

Everything else came together really well. The biggest downfall just mounting a monitor to the wall is where do you hide the cords. I found they make VESA mounts to attach micro computers to which wouldn’t be possible without. But it is also my biggest pet peeve of things not being clean.

Hardware list with links:

• Raspberry Pi 3B+
• LG-22MN430H-B https://www.bestbuy.ca/en-ca/product/lg-21-5-fhd-75hz-5ms-gtg-ips-led-freesync-gaming-monitor-22mn430h-b-black/14420211?cmp=knc-s-71700000055264709&gclid=Cj0KCQiA7YyCBhD_ARIsALkj54okJp2X4QYY6xbwWsdXBt_vXmeMJ2ID8zZ8DP-R8Nj4Gid3wW9BfmkaAiS7EALw_wcB&gclsrc=aw.ds
• 19v Power adapter for LG Monitor (the one that comes with the monitor is too big to fit behind. https://www.amazon.ca/gp/product/B07CNJYXPX/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
• 5v genuine apple iPad charger (the official raspberry pi adapter again is too big. I know what I should use but I couldn’t get it to fit and I have had no power warnings or issues for a week of it running)
• 3 plug flush mount, fabric wrapped extension cord. https://www.amazon.ca/dp/B07PQYN4K4/ref=cm_sw_r_cp_api_i_MJ0PW2DJ9J72KEY50F5D?_encoding=UTF8&psc=1
• Amazon tilting monitor wall mount. https://www.amazon.ca/gp/product/B01KBEO54Q/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
• Micro Computer Vesa Mount (use to mount everything on it) https://www.amazon.ca/gp/product/B07KB4YWQS/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
• 90degree HDMI cable https://www.amazon.ca/gp/product/B079JPH1B4/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
• White zip ties

The modules that I am using

Default

• clock
• calendar
• weather
• weather (copied and running twice for CSS)
• newsFeed

Modules

• MMM-NowPlayingOnSpotify
• MMM-MLB
• MMM-MLB (copied and running twice for CSS)
  *MMM-BackgroundSlideshow

CSS was my biggest obstacle but I was able to slowly figure my way around. For the weather and the MLB I had to run two instances so the background would work properly without a gap between the two modules. I had a hard time getting the bottom CSS to work with margins and eventually it just worked.

Everything has been running for a week before I mounted it and it seems to go great. I need to fix the CSS on the MLB scoreboard for the colour, and I noticed that my one calendar isn’t showing the symbol and the date is off for it.

Thank you to everyone on the forum who helped me on my way. I started with knowing hardly anything about a raspberry pi, css, or even really building using script. I still know there is a ton to learn and I look forward to my next project.

@jamaces

For future knowledge

within the Main.css there is

.region.bottom .module {
     margin-top: 30px;
     margin-bottom: 0px;
}

adding to custom.css

.region.bottom .module{
     margin-top: 0px;
}

Will fix the issue.

However if you have a bottom_bar module it removes the gap between bottom_bar and anything in bottom_left/center/right

@bkeyport I flipped the weather to bottom_right and MMM-MLB to top_right

MMM-MLB is now perfect.

Weather is now showing a gap between bottom_right. So it must be within magicmirror and not module based.

As an “easy” fix I tried bottom_left and its the same thing there is a gap between the two modules.

I don’t really know what i’m going to poke around at but I will give it a go. See what I can find.

@bkeyport

I did change the padding of the module and it didn’t change the distance.

I have since tried doing .region and again it was a no go. Just moved both modules all around without changing the distance between the two.

I don’t understand how the weather module worked no concern.

Maybe I will try changing the location of the mlb module to the top where weather is and see if it’s location based or module based.

I was able to achieve this with the default weather module.
I duplicated the module so I could remove the space between current and forecast.

Using custom CSS I was able to do the following

.module.weather {
     background-color:rgba(0,0,0,0.1);
     border-radius:10px 10px 0px;
     padding:4px;
     margin-bottom:0px;
}
.module.weather2 {
     background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
     border-radius:0px 0px 10px;
     padding:4px;
}

I am trying to do the same for MMM-MLB.

I duplicated the module so I could have one with scores and the other with standings.

My custom css looks the exact same other than no gradient.

.module.MMM-MLB {
     background-color:rgba(0,0,0,0.3);
     border-radius:10px 10px 0px;
     padding:4px;
     margin-bottom:0px;
}
.module.MMM-MLB2 {
     background-colour:rgba(0,0,0,0.3));
     border-radius:0px 0px 10px;
     padding:4px;
}

I have tried margin-top, and margin-bottom on both with 0px, 0%, 0, I have tried -500px and nothing will change the distance.

If anyone has a suggestion its appreciated.

Thank you.

@bkeyport Thank you! I realized after I made the post it is called gradient.

For future knowledge

change background-color to background-image and add linear-gradient with another RGBA value.

Thank you for your help.

Is there a way to have CSS go gradient to the left and to the right?

I have the news module at the bottom and I really just want it to be dark in the centre where the headlines are.

I have tried to right and to left, I have tried radial and nothing seems to work.

@sdetweil this forum is amazing. Thank you.

If I follow this thread and install on a new SD card using a 3B+ would it work plug and play on a ZeroW?

https://forum.magicmirror.builders/topic/11961/installing-magicmirror-on-your-raspberry-pi-zero-w

I followed this thread to add transparent backgrounds to my custom.css

Is it possible to set a fade to the background similar to how the default calendar and weather have a fade?

Thanks.

.module.calendar {
     background-colour:rgba(0,0,0,0.1);
     border-radius:10px;
     padding:4px;
}

I have MMM-MLB scoreboard and standings uploaded. Both just show the header with the Logo.

I know it’s the off season, I just want to know if I have the module installed properly.

Thanks