MMM-CountDown icon indicating copy to clipboard operation
MMM-CountDown copied to clipboard

How to Adjust Font Size

Open Bolovai opened this issue 4 years ago • 3 comments

Hey I love the module its just what I was looking for. One question though, is there anyway to reduce the font size as its showing up really large on my mirror and I would like to shrink it down a bit.

Thanks

Bolovai avatar Dec 19 '20 01:12 Bolovai

Screen Shot 2021-03-02 at 10 16 48 PM

I went searching in the MMM-CountDown.js file and found these lines that I highlighted in blue. I adjusted the first two lines where it says medium and large. I haven't found where those classes come from but I guessed and changed them from large and xlarge to medium and large.

I am hoping I can change the word "days" to gray and dimmed like it shows in the example on the read me page but I haven't found where to do that yet.

CraigTorg avatar Mar 03 '21 03:03 CraigTorg

@CraigTorg I figured out how to dim the word "days" like in the screenshot. The hint was in the "initial upload" commit. Here's what my MMM-CountDown.js getDOM function looks like:

getDom: function() {
		var wrapper = document.createElement("div");

		var timeWrapper = document.createElement("div");
		var textWrapper = document.createElement("div");
		var unitWrapper = document.createElement("sup");

		textWrapper.className = "align-left week dimmed medium";
		timeWrapper.className = "time bright xlarge light";
		unitWrapper.className = "dimmed";     // added

		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;   // moved  this.config.daysLabel to unitWrapper.innerHTML below

		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;
		unitWrapper.innerHTML = this.config.daysLabel;    // moved from 'var days' above. add other labels as needed like timeWrapper line but I have only tested with days

		wrapper.appendChild(textWrapper);
		wrapper.appendChild(timeWrapper);
		timeWrapper.appendChild(unitWrapper);    // added

		return wrapper;
	}

JAG836 avatar Aug 17 '21 12:08 JAG836

Thank for your help, resizing works perfectly just dimming doesn't work but that's fine for me

EfficientUser avatar Feb 22 '23 10:02 EfficientUser