MMM-Multimonth

marchvet

Just installed this module and have it positioned as

bottom_bar

but it actually is about a half inch above the bottom.

Anyway to get it to sit flush with the bottom of the screen?

(I am a noob with coding)

BKeyport

@marchvet Yes, it’s actually not the module that’s the error though it’s the overall system.

in css/custom.css:

:root {
	--gap-body-top: ??px;
	--gap-body-right: ??px;
	--gap-body-bottom: ??px;
	--gap-body-left: ??px;
	--gap-modules: ??px;
}

replace ?? with whatever value you find useful. the defaults are 60 for body and 30 for modules. I use 15 and 1 respectively.

– Brendan

marchvet

@BKeyport Thank you but I am not even sure how to get to the css/custom.css file?

marchvet

@BKeyport Thank you but I am not even sure how to get to the css/custom.css file?

sdetweil

@marchvet ~/MagicMirror/css/custom.css

is a file. if it doesn’t exist, create it

touch ~/MagicMirror/css/custom.css

BKeyport

@sdetweil Thanks, Sam - I tend to think multiple platform so I leave the main directories off when I write…

sdetweil

@BKeyport many new users don’t connect the names we talk about to the folders. many have not looked at the folders at all!

my install script is a blessing and a curse. gets u up and running fast , but doesn’t teach you much.

marchvet

Thanks I appreciate it. Works like a charm!

Egnos

Thanks @BKeyport great module!

BKeyport

MAJOR Update -
29 Oct 2022 - Start Implementing streamlined CSS, add feature to move weekend around, documentation improvements.

This update will not break old CSS or code. I’ve made sure any changed CSS includes reference to old CSS for compatibility. Some CSS names are changing to make more sense. Un-needed duplicates are being eliminated.

New:
If all you’re doing is changing the appearance, the README.md file has new instructions on how to do this… You can actually delete your old long changes and simply have changes in one css element.

Now you can move the weekend. See the config table in README.

Now you can turn on or off the previous/next month display in the month grid regardless of number of months!

Let me know if you have any bugs or oddities.

Thanks!

BKeyport

Another big update.

Event visualization is now working. Module will underline in a color of your choice (see css in README.md) for any event pulled from MagicMirror’s default calendar module.

Other tweaks have occurred. Please read the readme completely to upgrade.

Thanks!

MZ-BER

Thank you! Is there also an option to disable it or can I only hide that via css?

BKeyport

@MZ-BER To be honest, I forgot to add the code to turn it off. Was gonna fix something else and re-release in a couple of days.

BKeyport

New update to this module: Event visualization is now controllable by calendar.

Please see github for adjustments - Pay attention to “calNames” .

As always, module requires default calendar for functionality, but does not require display of said calendar.

Enjoy!
– B

pugsly

@BKeyport
How do you change the font and size now?

BKeyport

@pugsly in your custom.css file, change as desired, everything is based off the MagicMirror fonts:

.MMM-Multimonth .settings {
  --background-dimmed: var(--color-background);
  --background-weekday: var(--color-background);
  --background-weekend: cornflowerblue;
  --background-current: Yellow;
  --background-header: Green;
  --background-weekno: grey;
  --background-dow: var(--color-background);
  --color-weekday: var(--color-text);
  --color-weekend: var(--color-background);
  --color-current: var(--color-background);
  --color-dimmed: var(--color-text-dimmed);
  --color-header: var(--color-text-bright);
  --color-weekno: var(--color-text-bright);
  --color-dow: var(--color-text);
  --color-event: Red;
  --back-rounding: 8px;
  --alignment: center; 
  --fontsize: --var(--font-size-xsmall);
}

If you’re talking about the undocumented feature, It’s not ready yet, I just had some critical updates caught in the crossfire of forgetting to build on a dev branch. :)

Also, you may want to scrub any previous custom.css for the module out and start over, a lot of the module’s css changed when I did the “one entry to rule them all” functionality above, and it may be confused a bit. This was mentioned in an older release.

Spinster

@BKeyport

I find it even after setting the config for monthsVertical: true it is still not showing vertical,
Whay could be the problem. Please advice.

BKeyport

@Spinster Indeed. Something seems to have broken. I’ll fix it today.

Edit:

It appears I deleted it’s CSS. Backed off to fix - Repull the files, in the module folder do

git pull

and relaunch your mirror, it’ll work now.

Starting to recode the project to incorporate the “Undocumented feature” I mentioned in previous git pushes - as well as make it easier to read and do in the future, and I guess I missed that when I redid the CSS.

p1lspeda

Hi,
any idea on how I can achieve full background transparency with this module ?
Currently this is it:

Furthermore I’d like the day marking to have the same rounded edges as the week numbers.
How do I achieve that ?

Unfortunately I am not very experienced with css, so I most likely do not now how to ask the correct question - sorry for that.

BKeyport

@p1lspeda looks like I’ve got some work to do on the CSS - in looking up the solution, I found bugs.

In your custom.css (~/MagicMirror/css typically) paste the code below:

.MMM-Multimonth .settings {
  --background-dimmed: var(--color-background);
  --background-weekday: var(--color-background);
  --background-weekend: cornflowerblue;
  --background-current: Yellow;
  --background-header: Green;
  --background-weekno: grey;
  --background-dow: var(--color-background);
  --color-weekday: var(--color-text);
  --color-weekend: var(--color-background);
  --color-current: var(--color-background);
  --color-dimmed: var(--color-text-dimmed);
  --color-header: var(--color-text-bright);
  --color-weekno: var(--color-text-bright);
  --color-dow: var(--color-text);
  --color-event: Red;
  --back-rounding: 8px;
  --alignment: center; 
  --fontsize: var(--font-size-xsmall);
}

any line that includes “–background” can be set to rgba(255, 255, 255, 0) for transparent.

example:
---background-weekday: rgba(255,255,255,0);

See: https://www.w3schools.com/html/html_colors_rgb.asp for details.

(Note: the rest of the variables can also be set as you like, “back-rounding” for example, adjusts the rounded edges globally [except for current until below is added])

For the current day to round the edges properly paste:

.MMM-Multimonth .current {
  border-style: hidden;
  border-radius:  var(--back-rounding);
  border-color: var(--background-current);
  background-color: var(--background-current);
  color: var(--color-current);
}