MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Distinguishing CSS from Config

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

  • @ankonaskiff17 config settings are defined in the modulename.js in the default{} block

    css is any/everywhere. Find class=, style=

    Sometimes a module will provide its own css file, sometimes use the provided styles.

  • 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) {
                    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?

  • @ankonaskiff17 this.config. says u can add variables to config section. Or use the default for it.


Log in to reply