How small a monitor can one use as MM display? I’ve built a couple using larger monitors so I understand process but wondering if you run in to problems below a certain size.
I have an all-in-one Pi and 7" screen and wondering if I could do some sort of bedside display.

I have two iFrames and I need to set z-index so one overlaps and hides a portion of the other iFrame. Is that something I do in config.js or custom.css. Both iFrames are there, functioning fine but the css for that module is minimal and I need to flip which one lays over the other. I’ve tried changing the order in which they are positioned in the config.js file and it makes no difference.

Some of the modules you need to customize things like width and or height in the custom.css file to override the default css settings for that module.
Using the Developer Tools in the view option can help to visualize where the problem or fix may be.

I have an iFrame to hold a weather radar image.
Default for iFrame is no border but I wanted one to act as border for radar image. Got border no problem and I defined color also but it behaved as if it had some sort of bevel type property that I don’t understand.
For example if I chose hex value for red, the bottom and right borders would be red, the top and left borders would be a darker red.
Anyone got any thoughts on what is going on there?

I read through you code and reasonably easy to follow along and you gave everything unique names which helps.
The WeatherChart OTOH that uses the same block of code but doesn’t really lay out the underlying chart.js stuff which in that case I have failed to make work.
Obviously if I can change it in the script itself I should be able to make it work in config.js but that has not been the case after trying oodles of different combinations.

I’ll volunteer although I’m no programmer I do live in South Carolina

Put in issue in on Github about why the rain amount was not converting to inches when units are specified as imperial. Author of module resolved that yesterday. Also asked about scale on vertical axis as it seems too tight and rain trend wants to bang in to temperature trends.
Just sent him picture showing that.
Several things were able to be changed directly in the script but after following your advice to do all that in ether custom.css or config.js there was no way to access those parameters.

Spent a few hours looking at chart.js to see ifI could translate that to items in module but couldn’t find anything.

I have installed the MMM-WeatherChart module ( Tatsuma Matsuki) but I am struggling to understand how to convert

        datasets.push({
            label: 'Minimum Temparature',
            backgroundColor: this.config.backgroundColor,
            borderColor: this.config.color,
            pointBackgroundColor: this.config.color,
            datalabels: {
                color: this.config.color,
                align: 'top'

In to someething resembling this below

minimumTemperatureAlign : "below",

Because I don’t see where there is anything resembling this.config.minimumTemperature .
There is just the one reference to label: `Minimum Temperature`,
In a nutshell align is referring to the text being above the Minimum Temperature trend line.
There are several blocks in this same style relating to various of what seem to be CSS elements. I don’t understand how to get from the code block to the CSS property since I think this is being done using chart.js to build the grah.

Have you looked in the 3rd Party modules section? There are several DHT sensor modules in there you can use for reference, Just do text search on DHT

This is where I get tangled up with a code block like this, of which there are several. Up in default config that is showRain: false, so I just stick a showRain: true, in the config.js file. No problem with that. It is the things like label: 'Rain Volume (mm) and the rest. Do the get a css entry along lines of

 .module.MMM-WeatherChart .showRain {
label: 'Rain Volume (mm)';
}
.module.MMM-WeatherChart .dataLabels {
align: 'bottom';
}

These blocks are scattered throughout the script

        if (this.config.showRain) {
            datasets.push({
                label: 'Rain Volume (mm)',
                backgroundColor: this.config.fillColor,
                borderColor: this.config.color,
                borderWidth: 1,
                pointBackgroundColor: this.config.color,
                datalabels: {
                    color: this.config.color,
                    align: 'top'
                },
                data: rains,
                yAxisID: "y2"

this.config.showRain = true is easy.
it is the settings enclosed in the show Rain block. Colors defined prior so just ignore them?

If I have to hunt for CSS and CONFIG settings that are scattered through code, how do I distinguish between the two?

I’m going to move everything over to config.js but it would be nice if the sample config file that people copy paste contained all the configurable items.
If there is a big list in the module code like this sample, can I just copy it in one big block, paste appropriately in config.js, change default to config and bracket appropriately and plug in my values and they’ll override the defaults lines in xyz.js even if they have values plugged in already.
So that this sample config directly below becomes more like the second block?

 modules: [
        {
            "module": "MMM-WeatherChart",
            "position": "top_right",
            **"config":** {
                "apiKey": "xxxx",
                "dataNum": 12,
                "dataType": "hourly",
                "height": "500px",
                "width": "800px",
                "lat": 35.571337,
                "lon": 139.633989,
                "units": "metric",
            }
        },

 defaults: {
        updateInterval: 10 * 60 * 1000,
        retryDelay: 5000,
        apiBase: "https://api.openweathermap.org/data/",
        apiVersion: "2.5",
        apiEndpoint: "onecall",
        apiKey: "",
        lat: "",
        lon: "",
        units: "standard",
        lang: "en",
        chartjsVersion: "2.9.3",
        chartjsDatalablesVersion: "0.7.0",
        height: "300px",
        width: "500px",
        fontSize: 16,
        dataNum: 24,
        timeOffsetHours: 0,
        title: "Weather Forecast",
        iconURLBase: "https://openweathermap.org/img/wn/",
        dataType: "hourly",
        nightBorderDash: [5, 1],
        showIcon: false,
        showRain: false,
        color: 'rgba(255, 255, 255, 1)',
        backgroundColor: 'rgba(0, 0, 0, 0)',
        fillColor: 'rgba(255, 255, 255, 0.1)',
        dailyLabel: 'date',
        hourFormat: "24h"
    },

Do updates load to my machine without me knowing? If they do, you’re right, that will be a problem.
If they are announced and I choose then I just copy the whole existing MM complex to sd card.
That way if update is bad I can revert. I imagine most end users are like me. They build a display, configure with a little tweaking and then rarely update,
I have two Pi’s running ADSB receivers and the underlying Raspian OS are several years since I’ve done apt update on either SSH’ed in to one just now. 2017

@sdetweil That’s kind of funny, you hate VNC, I hate SSH. That’s what makes the world go round.
I’m not editing main.css really. At least not yet.

In the case of main.css I need to better understand how it works. If you remember, a few days ago I talked about needing to globally shrink some things, while globally enlarge other items. That was in reference to plugging in Pi to a bigger screen TV. They are about giving away 75" TV’s at Best Buy electronics stores for under $1000.00 so if you use a spare HDMI port on one of those, the modules are huge because the region is huge.

The clock default module would be 2 ft across. In that scenario, one would want to shrink things in the top_left and top_right globally while increasing the center regions for like an iFrame showing weather radar or a live YouTube stream in the middle portion. That also has the side benefit of allowing more modules on the screen the bigger the screen is.

All I’ve changed css that is internal to some of the modules. For example on the default calendar, there is a long list of defaults in the calendar.js file. Those default configuration settings are all basically css-like properties to me. But the calendar config file doesn’t contain that whole list of defaults when you copy from the module web page.

Since I am an end user, I just change the defaults in thecalendar.js file rather than copy it all over to the config.js file,

It gets even more complicated when the module is using an external program such as chartjs or momentjs as a wrapper I think is the term used.

It may not seem apparent but I do try and dig for the answer prior to posting the question.

I use VNC client & server to essentially remote in to the Pi desktop directly. So I sit at Windows 10 laptop and access the Pi desktop.
For me as an end user with terrible typing skills I find VNC much easier to use.

I don’t have a clue how git works under the hood like you and developers do.
I understand conceptually the benefit it provides to developers who may be widely disbursed geographically.

I fired up GEANY which is part of the Pi OS programming software but initially found it very hard to read, so gave VSCode a shot which ended up being a bad choice on my part. I then poked around GEANY early yesterday prior to surgery and found some settings that made the code much more readable. It also looks like there is no built-in ability to commit files back to Github. So will use it going forward.

If an individual uses the automatic install vs manual, does the custom.css file get loaded pre-populated say with the default modules css settings or is it blank?

For me, as an end user with poor typing skills, I see plugging in the css values directly in to the module as steps saved rather than generating that same set over on the custom.css file that is not there initially, since I have no reason to send the original but css edited XYZ.js file back to github.

I think (but am far from sure) that any changes made to to those json files were done by MS VSCode automatically and not directly by me. That’s why I asked VSCode Question about committing changes, etc.

VSCode and Github are both Microsoft products and entities meant to tightly integrate with each other, which I learned somewhat after the fact.
What I think happened was those files were in the commit location, I posted my question and closed VSCode to hopefully get an answer, but clicking close in VSCode caused a commit.

I just want a code editor with a save or save as option that also has good color coding and breaks out the code block hierarchy well.
I want to mess with the code at my end as locally installed files. If I break a module, that’s on me alone then. I then just re-download the file, try to understand why it broke and start over.
I’m not going to learn the language otherwise.
I understand Github is a version control tool among other things but I did not know that a link existed between Github<---------->VSCode so that one doesn’t need to leave VSCode to for it to merge files on closing VSCode, hence my VSCode question.

@sdetweil I got the CalendarEXT2 done per another reply.
I’m following your instructions at link but I get error telling me to either commit or stash clock.js, calendar.js, package-lock.json and package.json.
I copied the contents of calendar, clock, config, css as I needed to do that (with css & config) anyway but my Noobie is showing in not knowing how to commit files. I can move if I need to.
Also, which of those json files are being referred to?
I get a hernia repaired later today so may be a couple of days.

Although you can set either metric or imperial measurements in the chart settings it doesn’t look like there is a calculation to go from mm to inches. Temperatures change no problem but rainVolume is configured as (mm) and I swagged it and changed to (in) but it didn’t do anything. Didn’t even break it.