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.

    MMM-CountDown

    Scheduled Pinned Locked Moved Solved Troubleshooting
    7 Posts 3 Posters 1.6k 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.
    • P Offline
      pogges
      last edited by sdetweil

      Hallo helpers,

      i have trouble to color the fonts for date, event and Dayslabel.
      my css:

      /*
       *
       * MMM-CountDown
       *
       * 
       * MIT Licensed.
       *
       * Custom here your css module
       *
       */
      
      
      
      .MMM-CountDown .event {
        color: yellow;
      }
      
      .MMM-CountDown .date {
        color: orange;
      }
      
      .MMM-CountDown .daysLabel {
        color: yellow;
      }
      

      so whats wrong please

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        There is no classes in MMM-CountDown that is called .event .date or .daysLabel

        There is .time and .week

        .MMM-CountDown .week{
        color: yellow;
        }
        
        .MMM-CountDown .time {
        color: orange;
        }
        
        P 1 Reply Last reply Reply Quote 1
        • P Offline
          pogges @broberg
          last edited by sdetweil

          @broberg

          module.register("MMM-CountDown",{
          	// Default module config.
          	defaults: {
          		event: "Endlich Rente in",
          		date: "2021-31-5",
          		colored: true,
          		showHours: false,
          		showMinutes: false,
          		showSeconds: false,
          		customInterval: 1000,
          		daysLabel: ' Tagen',
          		hoursLabel: 'h',
          		minutesLabel: 'm',
          		secondsLabel: 's',
          	},
          
          	// set update interval
          	start: function() {
          		var self = this;
          		setInterval(function() {
          			self.updateDom(); // no speed defined, so it updates instantly.
          		}, this.config.customInterval); 
          	},
          
          	// Update function
          	getDom: function() {
          		var wrapper = document.createElement("div");
          
          		var timeWrapper = document.createElement("div");
          		var textWrapper = document.createElement("div");
          
          		textWrapper.className = "align-left bright large light";
          		timeWrapper.className = "time bright xlarge light";
          		textWrapper.innerHTML=this.config.event;
          
          		var today = new Date(Date.now());
          		var target = new Date(this.config.date);
          		var timeDiff = target - today;
          
          		// Set days, hours, minutes and seconds
          		var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
          		var diffHours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          		var diffMinutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
          		var diffSeconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
          		
          		// Build the output
          		var hrs = '';
          		var mins = '';
          		var secs = '';
          		var days = diffDays + this.config.daysLabel;
          
          		if(this.config.showHours == true) hrs = diffHours + this.config.hoursLabel;
          		if(this.config.showMinutes == true) mins = diffMinutes + this.config.minutesLabel;
          		if(this.config.showSeconds == true) secs = diffSeconds + this.config.secondsLabel;
          
          		timeWrapper.innerHTML = days + hrs + mins + secs;
          
          		wrapper.appendChild(textWrapper);
          		wrapper.appendChild(timeWrapper);
          
          		return wrapper;
          	}
          });
          
          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @pogges
            last edited by broberg

            @pogges okey, so .week wasn’t in your version.

            Thesw are tha classes that are defined

            textWrapper.className = "align-left bright large light";
            timeWrapper.className = "time bright xlarge light";
            
            P 1 Reply Last reply Reply Quote 0
            • P Offline
              pogges @broberg
              last edited by sdetweil

              @broberg soooo fix it

              in custom.css:

              .MMM-CountDown .time {
              	font-weight: bold;
              	color: red;
              	}
              .MMM-CountDown .event {
              	font-weight: bold;
              	color: red;
              	}
              

              in CountDown.js:
              before

              textWrapper.className = "align-left bright large light";
              timeWrapper.className = "time bright xlarge light";
              

              now:

              textWrapper.className = "event align-left bright large light";
              timeWrapper.className = "time bright xlarge light";
              

              thats it
              Thx

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

                @pogges please use the markdown code block for all config , and code postings…

                select the text and hit the </> button

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                P 1 Reply Last reply Reply Quote 0
                • P Offline
                  pogges @sdetweil
                  last edited by

                  @sdetweil ok

                  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