MMM-CountDown
MMM-CountDown copied to clipboard
How to Adjust Font Size
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

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 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;
}
Thank for your help, resizing works perfectly just dimming doesn't work but that's fine for me