MMM-CountDown



  • 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


  • Project Sponsor

    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;
    }
    


  • @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;
    	}
    });
    

  • Project Sponsor

    @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";
    


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



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

    select the text and hit the </> button