Raspberry Pi 4 connected to a 40" tv, mounted on a wall, vertically.
I built a box around the tv and used paint stirrers for the front of the frame

Modules:
MMM-anotherNewsFeed (default newsfeed with image of article)
MMM-Breathwork (a reminder to inhale and exhale)
MMM-CalendarExt3Agenda (mini month view and agenda)
MMM-Chuck-Norris (silly Chuck Norris ‘jokes’)
MMM-Chess-Daily (visibly hidden until you play a game)
MMM-Dad-Jokes
MMM-GooglePhotos (slideshow of google photos folder)
MMM-iHaveBeenThere (the places that my wife &. I have visited
MMM-OnSpotify (displays the currently playing song)
MMM-OnThisDayWikiApi (things that happened on today’s date)
MMM-Snake (play vintage snake game in full screen)
MMM-text-clock (the current time written in words)

Here’s what gives each module its own “floating” background.
(you have to modify the positions & regions in custom.css)

/* css/custom.css */

html {
  cursor: default;
  overflow: hidden;
  background: #c4c4c4;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: black;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}
.dimmed {
  color: black;
}

.normal {
  color: black;
}

.bright {
  color: black;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
  background: white;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: black;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

thank you @MMRIZE & @sdetweil for your assistance.

@MichMich

even though I’ve only been exposed to your project in the last year I thank you for all you’ve done. IF I’ve spent hours/days/weeks on my mirror I can only imagine what you’ve gone through. Again, thank you.

I always want to give a special acknowledgement to @MMRIZE & @sdetweil (and the others)
for their assistance and contributions to the community and myself.

@sdetweil

agreed. I’ve scrapped the newsfeedticker, I like his module better

@sdetweil

the ip address didn’t work, the name worked this time,
I put the whitelist under address like in your example

thank you very much

@mumblebaj

thank you

@greedyvegan said in MMM-NewsFeedTicker.:

@sdetweil

thank you, I’m going to try it now

I tried it and didn’t like it, so I removed it.
thank you.

@sdetweil I copied it the way you had in another post and it wasn’t working, it’s finally working now.

thank you again!

is it possible to float the header of a module above it like in this image?

as if “Palette Colors” said “New York CIty” for the weather
I tried using the developer feature in the browser to find it but it’s not specific, it just says “.module.header”

@sdetweil

thank you very much!

@sdetweil

i accidently ran pm2 start instead of pm2 start mm
then it returned

[PM2][ERROR] File ecosystem.config.js not found

then i ran pm2 start mm
then it returned

[PM2][ERROR] Script not found: /home/thecastle/MagicMirror/mm

status

after pm2 delete 0

after pm2 save

update -
it’s currently running (it was always running, it just had a weird error)
and told me to copy/paste

sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

@sdetweil

like this?

I got this error
[PM2][ERROR] File ecosystem.config.js not found

in the beginning of this post from 2021, it was recommended NOT to use this with a raspberry pi
today, in 2024, I have a raspberry pi 5, does that matter? lol

anyway, the left is on my pi 5 and the right is viewing it on a browser on my computer

is there an update on a lite version?

“fullscreen_below” fixed it, thanks

@sdetweil said in

where are you putting the z-index? in css, on what element

• .MMM-Globe {;z-index:-1;
  background-color: transparent !important;}

see the second link in my sig below for using the dev window elements tab

also set your module background the some non black color so you can see it

• it is

I added a module that has a black background, and its background is covering other modules… the z-index isn’t working from custom css and I can’t change its transparency.
(I’ve tried changing the other module’s z-index to no avail)

can I change the position from “middle_center” to “middle_center_below”?

(

thanks

@ric

sorry for the delay , I’ve updated the post with the custom css

@skyzuma

what you want to modify is listed in calender.js

dateEndFormat

in the file config.js change your module’s config section
(look at the red font)

{
module: "calendar",
header: 
position: 
**config**: {
calendars: [
			{
			 fetchInterval: 7 * 24 * 60 * 60 * 1000,
			symbol: "calendar-check",
                        dateEndFormat: "the date format you want",

@mumblebaj

thank you