MMM-CountDown

pogges

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

broberg

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

pogges

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

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

pogges

@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

sdetweil

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

select the text and hit the </> button

pogges

@sdetweil ok