MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Distinguishing CSS from Config

    Scheduled Pinned Locked Moved Custom CSS
    4 Posts 2 Posters 649 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ankonaskiff17A Offline
      ankonaskiff17
      last edited by

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

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @ankonaskiff17
        last edited by

        @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.

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • ankonaskiff17A Offline
          ankonaskiff17
          last edited by ankonaskiff17

          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?

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @ankonaskiff17
            last edited by

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

            color:
            And
            fillcolor:

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy