• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MMM-CountDown

Scheduled Pinned Locked Moved Solved Troubleshooting
7 Posts 3 Posters 1.6k Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    pogges
    last edited by sdetweil Dec 2, 2019, 6:10 PM Dec 1, 2019, 6:13 PM

    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

    1 Reply Last reply Reply Quote 0
    • B Offline
      broberg Project Sponsor
      last edited by Dec 1, 2019, 7:24 PM

      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;
      }
      
      P 1 Reply Last reply Dec 2, 2019, 2:53 PM Reply Quote 1
      • P Offline
        pogges @broberg
        last edited by sdetweil Dec 2, 2019, 6:06 PM Dec 2, 2019, 2:53 PM

        @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;
        	}
        });
        
        B 1 Reply Last reply Dec 2, 2019, 5:38 PM Reply Quote 0
        • B Offline
          broberg Project Sponsor @pogges
          last edited by broberg Dec 2, 2019, 5:38 PM Dec 2, 2019, 5:38 PM

          @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";
          
          P 1 Reply Last reply Dec 2, 2019, 6:06 PM Reply Quote 0
          • P Offline
            pogges @broberg
            last edited by sdetweil Dec 2, 2019, 6:10 PM Dec 2, 2019, 6:06 PM

            @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

            S 1 Reply Last reply Dec 2, 2019, 6:08 PM Reply Quote 1
            • S Offline
              sdetweil @pogges
              last edited by sdetweil Dec 2, 2019, 6:10 PM Dec 2, 2019, 6:08 PM

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

              select the text and hit the </> button

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              P 1 Reply Last reply Dec 2, 2019, 6:09 PM Reply Quote 0
              • P Offline
                pogges @sdetweil
                last edited by Dec 2, 2019, 6:09 PM

                @sdetweil ok

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                1 / 1
                • First post
                  5/7
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy