Magic Mirror Dashboard Templates to Make Your Hallway Pop

Why Your Magic Mirror Layout Is the Key to a Smarter Home

A well-designed magic mirror layout can transform a plain hallway into a sleek, information-rich display that actually fits your life. But getting the layout right — choosing where modules go, how they stack, and how they look on your specific screen — is where most DIYers get stuck.

Here’s a quick overview of the 13 standard positions available in MagicMirror²:

Position	Where It Appears
top_bar	Full-width bar at the very top
top_left	Upper left corner
top_center	Upper center
top_right	Upper right corner
upper_third	Upper third of the screen
middle_center	Center of the screen
lower_third	Lower third of the screen
bottom_left	Lower left corner
bottom_center	Lower center
bottom_right	Lower right corner
bottom_bar	Full-width bar at the very bottom
fullscreen_above	Overlay covering the entire screen
fullscreen_below	Full-screen background layer

MagicMirror² is free, open-source, and maintained by a large community of makers. It was even voted #1 in the Raspberry Pi MagPi Top 50 — so you’re working with a proven platform.

The good news: you don’t need to be a developer to get a great layout. You just need to understand how the region system works, when to use custom.css, and which tools can help you skip the trial-and-error.

This guide covers all of that — from the basics of placing modules in the right spots, to advanced CSS tricks, to visual drag-and-drop tools that let you see changes in real time.

Mastering the Standard Magic Mirror Layout Regions

When we talk about a magic mirror layout, we are essentially talking about a grid of “regions.” MagicMirror² provides 12 standard regions (plus the fullscreen options) that act as containers for your modules. Understanding how these map to your screen is the first step toward a professional-looking dashboard.

The regions are designed to be flexible. For instance, the top_bar and bottom_bar stretch across the entire width of the display, making them perfect for scrolling news tickers or long-form notifications. Meanwhile, the corner regions like top_left and bottom_right are ideal for compact data like the time, weather, or a small calendar.

How Stacking Works

One common question we see in the community is: “What happens if I put three modules in the top_left?” In MagicMirror², modules in the same region stack vertically. The order they appear in your config.js file determines their vertical order on the screen. If you want the clock above the weather, list the clock module first in your configuration array.

Visual Mapping of Coordinates

Think of your screen as a 3×3 grid with extra bars at the very top and bottom.

• The “Thirds”: The upper_third, middle_center, and lower_third regions are centered horizontally. They are fantastic for “hero” content like daily compliments or large-scale transit maps.
• The Corners: Corner regions are fixed-width containers. If a module is too wide for a corner, it may bleed into the center or cause layout shifts.

For a deep dive into the technical parameters of these regions, you can refer to the official Module Configuration | MagicMirror² Docs.

Advanced Customization and UI Animations

Once you have your modules in their general regions, you might find that the “default” look doesn’t quite pop. This is where we dive into the custom.css file. Every MagicMirror² installation includes this file, and it is your most powerful tool for fine-tuning.

The Power of CSS

By using position: absolute, you can bypass the standard region system entirely. This is particularly useful for tiny screens (like a 7-inch Raspberry Pi touchscreen) where the standard regions might overlap or feel cramped. We can also use z-index to control which modules appear “on top” of others.

If you are just starting your coding journey, check out our magic mirror coding guide to get familiar with the syntax. For those ready to dive deep into the visual elements, our guides on how to customize magicmirror ui and customize magicmirror ui 3 offer step-by-step styling tips.

Bringing the Mirror to Life with Animations

Static text is great, but animations make the mirror feel “magic.” Since version 2.25.0, MagicMirror² has supported animateIn and animateOut configurations. These leverage the animate.css library, allowing modules to slide, fade, or bounce into view.

For example, you can set your newsfeed to slideInLeft and slideOutRight. This creates a dynamic flow of information that catches the eye without being distracting.

Creating a Unique Magic Mirror Layout with Custom Classes

Sometimes, 12 regions just aren’t enough. Did you know you can create your own? By editing the index.html file (or using clever CSS selectors), you can define new regions like top3_left.

In your config.js, you can add a classes property to any module. For example, adding classes: 'my-custom-style' allows you to target that specific module in your custom.css without affecting every other module on the screen. This level of granularity is essential for a truly bespoke magic mirror layout. Learn more about this in our customize magicmirror ui 2 article.

Visual Editing and Dynamic Positioning Tools

If editing text files feels like a chore, there is a better way. The community has developed tools like MMM-ModulePosition that turn the layout process into a visual experience.

MMM-ModulePosition: Drag, Resize, and Save

This module is a game-changer for layout design. Instead of guessing pixel values in a CSS file, you can:

1. Enable the module in your config.js.
2. Use your mouse (or a touchscreen) to drag modules exactly where you want them.
3. Resize modules on the fly to see how they look at different scales.
4. Hit the “Save” button.

When you save, the module generates a custom.css.timestamp file. You simply copy the contents of this file into your main custom.css, and your layout is locked in. This is perfect for creating smart mirror custom widgets that need to sit in very specific spots on your glass.

Compatibility with MMM-Carousel

Many of us use MMM-Carousel to rotate through different “pages” of modules. If you use visual editors, make sure to add the positioning module to the ignoreModules list in your carousel config. This prevents the carousel from switching pages while you are trying to move things around!

Optimizing Your Magic Mirror Layout for Portrait vs. Landscape

The orientation of your monitor drastically changes how you should approach your magic mirror layout. A portrait orientation (vertical) is the classic “mirror” look, perfect for hallways. A landscape orientation (horizontal) is often better for office dashboards or kitchen command centers.

Responsive Design with Media Queries

We can use CSS @media queries to detect the screen orientation. This allows us to have one configuration that looks different depending on how the screen is turned. For example:

• Portrait: Stack modules vertically in the top_left.
• Landscape: Move those same modules to the top_bar to take advantage of the extra width.

If you are running your mirror on a Raspberry Pi 4, you might need to use xrandr commands in your autostart script to properly rotate the display output. For more on the technical backend, see our guides on smart mirror javascript setup and smart mirror javascript setup 2. You can also find community discussions on this topic at the Change layout based on orientation? | MagicMirror Forum.

Frequently Asked Questions about Magic Mirror Layouts

How do I place two modules side-by-side?

The easiest way is to use the top_left and top_right regions. Because these regions are separate containers, they will naturally sit on opposite sides of the screen. If you need them side-by-side in the same region, you will need to use CSS Flexbox or Grid in your custom.css to change the layout from vertical stacking to horizontal.

What is the difference between fullscreenabove and fullscreenbelow?

Think of these as layers in a sandwich:

• fullscreen_below: This is the bottom layer. It is perfect for background images, slow-moving video streams, or “wallpaper” modules. Anything in this layer will sit behind your clock and weather.
• fullscreen_above: This is the top layer (the overlay). It is used for alerts, full-screen notifications, or screensavers. Anything here will cover up your other modules.

Why do my modules overlap on small screens?

On smaller displays (like 5 or 7-inch screens), the default margins and font sizes are often too large. The regions begin to “bleed” into each other. To fix this, we recommend setting the body margin to 0px in your custom.css and using the zoom property (e.g., zoom: 0.8;) to scale down the entire UI.

Conclusion

Creating the perfect magic mirror layout is a journey of experimentation. Whether you stick to the 12 standard regions or venture into custom CSS and visual editors, the goal is the same: to create a display that provides the right information at a glance.

The MagicMirror² community is incredibly active, with thousands of users sharing their layouts on forums every day. If you hit a wall, don’t be afraid to ask for help or share your progress!

Ready to start building? Explore more smart mirror hardware guides to find the perfect screen and frame for your project. Happy building!