• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 604 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.
  • A Offline
    ankonaskiff17
    last edited by Dec 9, 2020, 6:15 PM

    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 Dec 9, 2020, 6:40 PM Reply Quote 0
    • S Offline
      sdetweil @ankonaskiff17
      last edited by Dec 9, 2020, 6:40 PM

      @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
      • A Offline
        ankonaskiff17
        last edited by ankonaskiff17 Dec 9, 2020, 7:28 PM Dec 9, 2020, 7:13 PM

        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 Dec 9, 2020, 10:46 PM Reply Quote 0
        • S Offline
          sdetweil @ankonaskiff17
          last edited by Dec 9, 2020, 10:46 PM

          @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
          1 / 1
          • First post
            1/4
            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