@sdetweil Right at the top just below html. The way I understand is that it will load html first, then body. My html is an abbreviated version of main.css html

custom.css

main.css

@sdetweil I’m just saying that the file address is good as entered.
In main.css you have

html {
  cursor: none;
  overflow: hidden;
  background: var(--color-background);
  user-select: none;
  font-size: var(--font-size);
}

set for background. Is that causing issues? custom.css should override that, shouldn’t it?

@sdetweil I’m more stumped now. The file name & location are good. If I hover over the url in your second example in VS Code it gives option to follow link and launches browser and loads picture just fine but no joy in MM.

I am trying to add a background image via @Piranha1605 BG Animation with CSS and while I have the colors changing, I can not get the background image to show.
background: url("/home/pi/MagicMirror/Backgrounds/IMG_0169.JPG");. I’ve tried various versions of the file location all with no success. I brought image over from my Windows laptop and the file name is same but is there an issue with it being in Caps? I also created folder Backgrounds to hold pictures but I’m stumped.

@sdetweil fa is font awesome?

Not sure if this is a custom.css question or a config.js question.
In the default Clock module you have the option to show sun time and moon time. By default they are off but I have set to true.

I am scaling up the modules for big TV and had to set .region.left a lot wider than however it translates on to the big screen because the showSunTimes and showMoonTimes were starting to text wrap although that might not be quite the term used. I would like to do away with the circled portion of the sunset and I assume sunrise time I have circled in the clock module.

I ran it down to this block in Developer Tools but not sure how to tackle.
I want to keep the sunrise and sunset times but don’t really care about the time UNTIL sunrise or sunset. I would probably get rid of the percent of full moon value too but imagine I just change verbiage similar to how to approach the sun question
On top of that it will allow me to recover some of the middle region I gave up when I widened .region.left.

@sdetweil I added some text and link to API page to better describe and locate the NWS API example. People should be better able to understand how to make that work.

@bkeyport Saw an example in Custom CSS Showcase with image background and was wondering if it was placed on fullscreen below but looked at that CSS again and saw how image was placed. That, and just wondering what they did. When using Developer Tools I see them quite frequently but never seen any discussion of their purpose.

@sdetweil module_3_weather.module.weather and module_4_weather.module.weather would be what I would use to distinguish between the two in my css?

Are there pages that discuss use of fullscreen_above and fullscreen_behind ? I have not run across anything regarding those two options for module placement.

@cowboysdude I understand the purpose of custom.css and in the end main.css which I copy to custom.css will be different than main.css.

When you run MM on a big 45+ inch TV , each module is really small so if you park module X at top_left and park module Y at bottom_right you have two small modules that are same small size and would seem better to do them both with one block of css.
The other thing that I want to understand is if the top, bottom, left and right sections scale up on big monitor?
If I put a module in top_left is the right edge of the module hitting the right side of the left section.

My first pass at this was module by module in custom.css and it was a chore. I’m first to admit i’m a noob in extreme at this but after upscaling each module one by one I was wondering if there was an easier way. I subsequently blew up whole thing so opted to start over. I don’t mind that I killed module via that very css but on second pass I’d as soon avoid the module by module tweaking. As @sdetweil says, just piling in more modules not way to go.

Standard PC monitor it is not an issue. All the modules seem written with PC monitor in mind. In my use case I want MM to occupy one of HDMI ports on TV, with other HDMI port being cable TV. I can just toggle inputs on TV remote to flip between the two.

@sdetweil You’ve commented on having large screen TV running MM and I’m attempting to do the same. This is second attempt at this and seeing how small modules are and how much void space is between modules I was wondering if I could copy main.css to custom.css to globally address all the modules similarly. It would end up different than main.css but instead of tackling each module separately, get them all at once. A prime example would be the .dimmed setting. I find that hard to read no matter which module I am looking at so change to bright and same with fonts, big screen TV needs everything to be up-sized and tackling globally seems to be a good option. Wondering on your thoughts and issues you dealt with on large TV.

When reusing a module, in this case the default weather module, how do you apply unique CSS to each one separately?
I can see same thing arising with the default calendar module.

I’ve looked a very little bit at Font-Awesome and was wondering if there a FREE colored icon swaps for ones that are in general use for the most part. It looked like colored icons were premium.

@sdetweil @BKeyport just trigggered a question on inheritance. On several occasions when I have Developer Tool up to look at something , I’ll see message text that is roughly “X is inherited from body” or from main. Been a while since I was really poking around in developer tool mode. Think above was in context of CSS. So in event you want to change X, how do you tackle without it having global impact?

If you go with the default settings that are coded in to each module, you can delete that from the config.js module script associated with each module?

For example, if color: true, is the default and you are going to stick with true then you can delete that line in config.js because it is coded true in the file you installed in MagicMirror/modules?

@sdetweil Just wanted to pass on that have two iterations of the default weather module running. One for “current” and one for forecast using weathergov as my data source. Appears I can do away with weatherEndpoint on both with no ill effects.

There is a NWS API Page that runs through an example. Follow example using the appropriate gps coordinates for your location. In my screen capture you see /gridpoints/CAE/70,67/forecast/hourly which relates to my local NWS radar at CAE which is local airport. I do not think this will work for people trying to get finer resolution via someone’s weather station who is uploading their data to a 3rd party provider.

I have seen the CURRENT forecast drop out infrequently but it has always come back on its own.

Daily forecast.

Current Forecast

MagicMirror Output

@jalibu I split the difference. Most companies have something along the lines of Incorporated or Corporation hung of backside of their name, and or the corporate name is not what a company is referred to in conversation. For example BA, or as its letterhead says, The Boeing Company. Whether it is financial news or straight news, no one says “The Boeing Company”, people just refer to BA as Boeing.
So I added the name back but edited each name back to what each company is called in conversation.

Just wondering what the status of the default Weather module is in regards to FORECAST when using provider weather.gov
I’m using it twice, once for current and once for forecast.
A while back I messed with this module and struggled with forecast but today forecast doing its thing, admittedly with a shot in the dark tweak I used off of the National Weather Service website where they talk about the API.

@sdetweil Thanks. MM I am making now doesn’t need any person specific calendar.
So you are pulling that link you can get from Google calendar and plugging it in where the US Holidays ical link is in the default module setting?