Showcase

JumpStart your project by downloading shared projects?

sdetweil — Thu, 08 Jan 2026 16:24:09 GMT

@techeros part of the problem is that people ‘assume’ that data entry (making calendar entries, updating chore lists, adding to shopping lists) is ‘built in’, ’ of course’… we don’t have that… the design for MM is a composable(different modules for different data sources) information panel. data entry is phone, display is MM. and then there is a whole HOST of fun things, dakboard has this ‘cool’ white background… MM is black, and all the modules are transparent, showing the black. change the background to white (easy), but the modules do not auto adjust cause they are all user developed and didn’t use the built in styles…

Magic TV Box A Custom Setup Using MagicMirror

jturczak — Fri, 11 Apr 2025 12:27:54 GMT

@jerryy622 Hey Jerry, This sounds fantastic! Please share your scripts or a link as to where to find the info! I would love to have this kind of thing running on my TV so i can view it when i switch to the HDMI channel that my Pi would be hooked to! I would love to see some screen shots of what you created also! Joe

Cozyla like bright colors mirror (not used as a mirror)?

Kdizzle — Mon, 23 Dec 2024 23:17:09 GMT

@sdetweil Thank you! I will start playing with and learning CSS. Thank you for the quick demo!

Dakboard-esque Layout

memoryone85 — Mon, 25 Nov 2024 20:53:34 GMT

[image: 1732568012596-ymsd6czlci2e1.jpeg] body { margin: 0; height: 100%; width: 100%; background: rgb(0 0 0 / 100%); color: white; } .dimmed, .normal, .bright { color: white; } /* Region Definitions. */ .region.top.right, .region.bottom.right { position: absolute; width: 79%; } .region.top.left, .region.bottom.left, .region.middle.center { position: absolute; width: 20.5%; } .region.fullscreen.below { position: absolute; width: 24.25%; /* Background doesnt match for some reason */ } /* Clock Options */ .clock { float: right; text-align: right; } .clock .time { font-size: 90px; } /* MMM-GoogleTasks Formatting */ .MMM-GoogleTasks { float: right; margin-top: 50px; width: 100%; } .MMM-GoogleTasks .module-header { visibility: hidden; } .MMM-GoogleTasks .item.notes { display: none; } .MMM-GoogleTasks .item { padding: .25em .25em .25em 1em; border-width: 0; } /* MMM-OpenWeatherMapForecast Options */ .MMM-OpenWeatherMapForecast .module-content { width: 100%; } .MMM-OpenWeatherMapForecast { text-align: right; } /* MMM-CalendarExt3 Options */ /* Hides Calendar Header */ .MMM-CalendarExt3 .module-header { visibility: hidden; } /* Global Settings */ .CX3 { --cellbgcolor: rgb(0 0 0 / 100%); } /* Current month cell background color */ .CX3 .thisMonth { background-color: var(--cellbgcolor); } /* Remove Calendar Week */ .CX3 .cellContainer .cell:nth-child(1) .cw { display: none; } /* Day of Week Formatting */ .CX3 .weekend { font-size: 100%; font-weight: normal; } .CX3 .weekend_1, .CX3 .weekend_2, .CX3 .weekday { color: var(--defaultColor); font-weight: bold; text-align: center; } /* Day Number Formatting */ .CX3 .cellHeader { text-align: left; font-size: 100%; } /* Change font sizes */ .CX3 .event.singleday .headline:not(.useSymbol)::before, .CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before, .CX3 .event .headline .title, .CX3 .event .headline.useSymbol .symbol, .CX3 .event.singleday .headline .time, .CX3 .event.multiday .headline .startTime, .CX3 .legends .legend, .CX3 .legend.useSymbol .symbol{ font-size: 90%; } /* Event Formatting */ .CX3 .event.fullday, .CX3 .event.multiday, .CX3 .legends .legend { border-radius: 8px; color: var(--oppositeColor); }

My First Attempt

JeffreyDaro — Fri, 01 Dec 2023 19:01:29 GMT

This is my first attempt at setting up a MagicMirror. I am using the MMM-Carousel module to loop through four different configurations. I am not doing any fancy. I am trying to learn the basics and will then go from there. Here is my setup… Hardware: Raspberry Pi3 built using the CanaKit, displayed on a vertical 24’’ monitor Stock Modules: Clock, Calendar, Weather, Compliments 3rd Party Modules: MMM-NFL, MMM-GooglePhotos, MMM-Carousel Customizations: I made updates to the CSS to change the opacity of modules, and to add rounded corners. [image: MagicMirror.screenshots.four_.carousel.slides-slide-1.png] [image: MagicMirror.screenshots.four_.carousel.slides-slide-2.png] [image: MagicMirror.screenshots.four_.carousel.slides-slide-3.png] [image: MagicMirror.screenshots.four_.carousel.slides-slide-4.png]

MagicMirror UI cant resize!

nousername — Fri, 19 Mar 2021 13:50:42 GMT

@george @sdetweil thanks a lot guys both worked just right!!

MagicMirror Cyberpunk CSS

mezcalbomb — Sun, 07 Feb 2021 18:52:07 GMT

love the colors! would be cool to add like a cool graphic or cyberpunk logo to reinforce more.

BG Animation with CSS

ClassicRed — Wed, 01 Jul 2020 21:08:47 GMT

Hello I applied the css, great Except that my screen is small, I have to put it in portrait mode when I do this: https://forum.magicmirror.builders/topic/9707/save-performance-when-rotating-screen-e-g-on-raspberry-pi/12?page=2 the whole image goes into a spin thanks for the help Bonjour J’ai appliqué le css , génial Sauf que mon ecran et petit , je dois le mettre en mode portrait quans je fais ceci : https://forum.magicmirror.builders/topic/9707/save-performance-when-rotating-screen-e-g-on-raspberry-pi/12?page=2 toute l’image part en vrille Merci pour l’aide

CSS experiments for newbies

Stoffbeuteluwe — Fri, 19 Jun 2020 19:09:04 GMT

@Piranha1605 :thumbs_up_medium-light_skin_tone: thanks nice work

Awesome layout

Johanba — Tue, 12 May 2020 22:56:31 GMT

@sdetweil . I would like a copy of you code as weel If possble the Config.js, Main.cssand Custom.css my email is jbarkhuizen@gmail.com

Bright UI

sdetweil — Tue, 12 May 2020 18:36:50 GMT

@rdwilbrink I don’t know.

Dark UI

Piranha1605 — Sat, 02 May 2020 15:18:30 GMT

@robertybob You will need to adjust the size of the modules.

Show date below time and date info on several lines

oscarb — Wed, 31 Jul 2019 22:17:11 GMT

Hi! Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module! [image: 1564610343245-screenshot-2019-07-31-at-23.56.53.png] custom.css /* CLOCK */ #module_2_clock > div > div { display: flex; flex-direction: column; } /* Date */ #module_2_clock > div > div > div.date { order: 2; } /* Time */ #module_2_clock > div > div > div.time { order: 1; font-family: Roboto, sans-serif; font-weight: 300; font-size: 80px; line-height: 75px; letter-spacing: -3px; color: #fff; } Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this: config.js { module: "clock", position: "top_right", config: { displaySeconds: false, dateFormat: "dddd D MMMM[ vecka] W[]", } }, NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in , and to make it work. Hope this can inspire and help someone! :)

Magic Mirror Redesign WIP :D

Chazzer — Wed, 22 May 2019 21:52:33 GMT

@earlman great work, this looks really good.minimalist and clean

Save performance when rotating screen e.g. on Raspberry Pi

floydrexdime — Tue, 05 Feb 2019 16:32:59 GMT

Hi there! thanks for the easy fix! Is there a way to reposition the modules on the mirror? when I rotate the screen 90 degrees the bottom module (the newsfeed) its completely cut out.

Animated rainbow color gradient for the default clock module

Smotx — Sun, 03 Feb 2019 19:38:24 GMT

@ganget said in Animated rainbow color gradient for the default clock module: { module: “clock”, position: “top_center”, classes: “clock-time-only”, //this line config: { timeFormat: 24, showPeriod: true, displaySeconds: false } Ok but it’s not ok on mine :(. { module: "updatenotification", position: "top_bar" }, { module: "clock", position: "top_left", classes: "clock-time-only" },

Apple TV meets MagicMirror.

DanLeo — Fri, 31 Aug 2018 18:49:19 GMT

Apple TV integrates with MagicMirror to display smart widgets, notifications, and media on a mirrored screen, enhancing functionality.

My Mirror-less Info Board

emlowe — Wed, 02 Aug 2017 03:58:23 GMT

That is an early look at @Sean 's upcoming module MMM-calendarExtDays. He is about to release an updated version under a new name - look on the forum here for MMM-calendarExtDays -Earle

My display so far...

vincentveenman — Wed, 03 May 2017 02:15:07 GMT

@j-e-f-f Hi Jeff, amazing job on the css. Would you please share your files for me to learn? Thanks in advance. Vincent

Colors changed

OldSunGuy — Sat, 31 Dec 2016 09:03:37 GMT

Should .brightb should be .bright ? I also noticed there are some duplicates. Each one of the following have 2 entries. .currentweather .wi-cloudy .currentweather .wi-night-showers .currentweather .wi-night-snow .currentweather .wi-showers .weatherforcast .wi-cloudy .weatherforcast .wi-night-showers .weatherforcast .wi-showers I don’t believe they cause any problem though.

Family Info Board

Wedee — Thu, 08 Dec 2016 02:31:33 GMT

I imagine the Custom.CSS failure is related to the fact that its calling for an image. I would remove the two lines related to the Background and see if it works then. Other than some colors and of course the forcing of the column widths there is not really much in the custom.css In the config.js I sent you via email - you will see I changed to using the module MMM-Profilepicture pointing back at localhost to host backgrounds there. It is much cleaner easier to use. I also switched from wunderlist to todoist for the todo list… I have not done much other than change the background for many years now - Wife is asking for a refresh, and we picked up a Narrow hutch someone was throwing away that with a coat of paint some new handles and a new monitor will make for an excellent info board - so once that is refinished i will start anew again but this time the screen will be in portrait. Good luck and happy learning

Not really a mirror at all - but is really helpful

joela85 — Wed, 16 Nov 2016 11:53:12 GMT

I really like what you’ve done here, and am looking to do something similar. I’ve got a touchscreen monitor so firstly wondering if I can have them on different pages and swipe between them. I would also like this if I could have a slideshow playing and then when music played on my sonos speakers then that module would show instead of the slideshow, or over the top of? Anyone have any ideas?