MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast

BerkSmash1984

@sdetweil
Thank you! I will dig into it via the dev console

BKeyport

@BerkSmash1984

It uses the defaults from MagicMirror for grey text. I use:

root {
	--color-text: #DDD;
	--color-text-dimmed: #666;
	--color-text-bright: #fff;
      --color-background: #000;
	
}

/* Originals: 
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: #000;
/*

BKeyport

Anyone know how to get the entire table to center within the region? I don’t want to center the contents, only the position of the table being built by the app.

thanks!

sdetweil

@BKeyport

position: relative
either use margin or x and width, margin is easier

BKeyport

@sdetweil the problem is that I can’t find the right CSS class to apply it to.

sdetweil

@BKeyport did u use the dev console to examine the content? click on the element u mean to adjust?
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1679584458559

may not be a class, so you would have to select more … just have to be careful if the table is in a div, in a div… then its ‘size’ and position are relative to the parent (div) …

.modulename table {
position: relative
...
...
}

this is my goto for figuring out the selector ( the thing before the { )
https://www.w3schools.com/cssref/css_selectors.php

look at the css for the form in MMM-Config

https://github.com/sdetweil/MMM-Config/blob/main/webform.css

selector doesn’t have to start with a class…
note in the cheat sheet its ALWAYS selects ALL elements that match

BKeyport

@BerkSmash1984 FYI, there’s more ways to make things easier to read - fade the background - or add a background to the modules themselves.

Here’s how to add a background to the modules:

the .5 is the opacity in this case, I’ve got it set to 50% visible.

.module {
  background-color: rgba(0,0,0,.5); 
}

BKeyport

@sdetweil found it. Missing a * on the opening CSS when I did it…

.MMM-OpenWeatherForecast * {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

does it, for anyone else that runs across this.

BKeyport

@BerkSmash1984 I’ve also found, in the documentation for MMM-Wallpaper, a “filter” option - If you don’t want to put a background on the modules, you can use this to improve readability.

BerkSmash1984

@BKeyport
Thanks for the responses! The filter for MMM-Wallpaper worked perfectly (I actually had values specified already but must have forget when I first setup the module). I dropped the grayscale and brightness down to 0.2 and that seems to be the sweet spot for ensure the default text color is legible, regardless of the background.

Thanks again for your help, I really appreciate it!