Inspired by @jasvanek LCARS mirror, I’ve created my own. It’s not perfect by a long shot, but it works for me!

I made a crude background on PowerPoint:

backround2.jpeg

Then after years and years (probably an hour) I put together this custom CSS:

:root {
    background-image: url("backround2.jpeg");
    --color-text: #999;
    --color-text-dimmed: rgb(102, 102, 102);
    --color-text-bright: rgb(255, 255, 255);

    --font-primary: "Antonio Bold";
    --font-secondary: "Antonio Light";
    
    --font-size: 25px;
    --font-size-small: 0.75rem;
  
    --gap-body-top: 150px;
    --gap-body-right: 61px;
    --gap-body-bottom: 160px;
    --gap-body-left: 200px;
    
    --gap-modules: 30px;
  }

.clock {
    --color-text: #CC807D;
} 
.weather {
    --color-text: #CC807D;
}

.region.top.right {
  width: 30%
}

.mmmtraffic-firstline {
  font-size: 25px;
  color: #CC807D;
}

.mmmtraffic-secondline {
  font-size: 0.75rem;
  color: rgb(102, 102, 102);
}

If this is total rubbish, please let me know how to improve in excruciating detail!

@lparco What do you have done so far?

Inspired by @jasvanek LCARS mirror, I’ve created my own. It’s not perfect by a long shot, but it works for me!

I made a crude background on PowerPoint:

backround2.jpeg

Then after years and years (probably an hour) I put together this custom CSS:

:root {
    background-image: url("backround2.jpeg");
    --color-text: #999;
    --color-text-dimmed: rgb(102, 102, 102);
    --color-text-bright: rgb(255, 255, 255);

    --font-primary: "Antonio Bold";
    --font-secondary: "Antonio Light";
    
    --font-size: 25px;
    --font-size-small: 0.75rem;
  
    --gap-body-top: 150px;
    --gap-body-right: 61px;
    --gap-body-bottom: 160px;
    --gap-body-left: 200px;
    
    --gap-modules: 30px;
  }

.clock {
    --color-text: #CC807D;
} 
.weather {
    --color-text: #CC807D;
}

.region.top.right {
  width: 30%
}

.mmmtraffic-firstline {
  font-size: 25px;
  color: #CC807D;
}

.mmmtraffic-secondline {
  font-size: 0.75rem;
  color: rgb(102, 102, 102);
}

If this is total rubbish, please let me know how to improve in excruciating detail!

Good Afternoon,

I’ve setup up my MagicMirror and successfully tweaked the settings I needed.

I only have a really basic grasp of any of this so the help on this site has been invaluable.

The thing I’m struggling with is end times on the default calendar module. I can only get the calendar to display the start times of events.

Any suggestions?

module: "calendar",
		header: "Shifts",
		position: "top_left",
		config: {
			colored: true,
			timeFormat: "dateheaders",
			showEndTime: true,
			showEndTime: true,
			calendars: [
				{
					symbol: "user-astronaut",
					url: "http://localhost:8080/modules/calendars/mine.ics"
								},
				{
					symbol: "user-ninja",
					url: "http://localhost:8080/modules/calendars/bf1.ics",
				color: "#3734eb"				},

{
symbol: “user-secret”,
url: “http://localhost:8080/modules/calendars/bf2.ics”,
color: “#34ebeb” }
}