The module configuration documentation says that you can set a custom “classes” parameter and specify css classes for a module. I am displaying several modules on multiple pages where the main page has a small “snapshot” bit of information, and then on another page I have more in-depth information (calendars, weather forecasts, etc.). I’d like to adjust the font size for the module on only one of the pages. What is the format of using the “classes” parameter then? I’ve tried this for the config:

...
module: 'module-name',
classes: 'myclass',
...

and then something like this in the custom.css:

.module-name .myclass {
font-size: 50px;
}

but it doesn’t seem to be taking, so I’m assuming I’m doing it wrong and haven’t been able to find any examples. Any help would be great. Thanks!

Does the ID selector for the module start numbering at 0 or 1? I’ve tried both and it doesn’t seem to be working for me for this module or any other module.

@ashishtank wasn’t aware of that functionality, but I’ll give it a try.

I did find another workaround myself after scanning through the module’s CSS. I’m using the “tiled” style on Page 1, and the “table” style on Page 2, so I was able to copy the CSS of the “table” related classes for the module and override certain parameters in custom.css for them, which seems to have worked without any ill-side effects so far. Though I think in general the approach you’ve suggested might be the better long-term solution. Thanks!

I’m currently trying to set up MMM-OpenWeatherMapForecast in such a way where on page 1, I have just a snapshot of the current weather, and then another instance on page 2 where I would have the full weekly forecast included basically taking up the full right side of the screen. I could set the width of the module in general to wider, and it seems to work, but it also impacts the instance that exists on my first page, which I don’t want. I know that I can set the “classes” parameter on the module and the documentation for MMM-OpenWeatherMapForecast even describes changing the width like so:

.MMM-OpenWeatherMapForecast .module-content {
  width: 500px; /* adjust this to taste */
}

But I’m not sure how to combine the two to adjust the width of only the second instance. I’ve tried a few things, but nothing so far has worked. Any pointers? Is it possible?

I have set the config to have this:

...
module: 'MMM-OpenWeatherMapForecast',
position: 'top_right',
classes: 'week-forecast', //Is this maybe supposed to be a list? the documentation doesn't say
config: {
...

My attempts so far have included:

.MMM-OpenWeatherMapForecast .week-forecast .module-content {
  width: 500px;
}

and

.MMM-OpenWeatherMapForecast .module-content .week-forecast {
  width: 500px;
}

Thanks for any help or insight you could provide!