Magic Dashboard & Whiteboard

zdenek

@sum2023 said in Magic Dashboard & Whiteboard:

MMM-CalendarExt3

amazing - u did something with CSS? Or how did u get agenda view (MMM-CalendarExt3) over all width of screen?
thanks

BKeyport

@zdenek That’s either bottom_bar or CSS to stretch it.

zdenek

@BKeyport ok, thanks

bhepler

@sum2023 - Excellent idea. And great execution.

themoe

Very nice solution!

I was thinking about a very similar setup. But I would like to have very thin or no borders between the screen and the whiteboard.

And is there a white background scene for magic mirror with dark font colours?

Best case would be the white of the screen is the same white of the whiteboard.

bhepler

@themoe - I’m pretty sure one of the forum members has a custom CSS file that does a white background. If you check out that portion of the forum you can probably find it.

karsten13

https://forum.magicmirror.builders/topic/12815/bright-ui?page=1

https://forum.magicmirror.builders/topic/13108/css-experiments-for-newbies

BKeyport

@themoe Most of what you need is the root section of main.css, which you can modify by adding it to custom.css

Here’s the defaults, adjust as you desire. However, I will warn you, you may also have to do it on a module by module basis - many modules don’t use these defaults for even their base text.

:root {
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: #000;
  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  --font-size: 20px;
  --font-size-xsmall: 0.75rem;
  --font-size-small: 1rem;
  --font-size-medium: 1.5rem;
  --font-size-large: 3.25rem;
  --font-size-xlarge: 3.75rem;
  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  --gap-modules: 30px;
}

ToneStrife

@sum2023 Do you mind sharing your CSS code or config? I’m looking to do somethign similar but a newbie here