boazarad / MMM-CountDown

Magic Mirror Module to count down to a specific date
MIT License
36 stars 24 forks source link

How to Adjust Font Size #18

Open Bolovai opened 3 years ago

Bolovai commented 3 years ago

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

CraigTorg commented 3 years ago
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.

JAG836 commented 3 years ago

@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;
    }
EfficientUser commented 1 year ago

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