Comments (3)
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.
from mmm-countdown.
@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;
}
from mmm-countdown.
Thank for your help, resizing works perfectly just dimming doesn't work but that's fine for me
from mmm-countdown.
Related Issues (12)
- Add Support for hours/minutes/seconds HOT 2
- Keep getting update notification. HOT 2
- Option to auto hide module when event is reached
- Incorrect countdown number. HOT 1
- Countdown Timer Displaying -18275 Days for March 9th 2020 HOT 1
- Impossible to reduce the size of the text HOT 2
- Not Showing up FIX!
- Nothing shows up. HOT 1
- Let the countdown be a date/time, not just date. HOT 3
- Calculate best interval HOT 2
- Won't show up HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mmm-countdown.