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.

    Display waste bins in color

    Scheduled Pinned Locked Moved Custom CSS
    52 Posts 3 Posters 14.0k Views 3 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.
    • kusselinK Offline
      kusselin
      last edited by

      @ashishtank said in Display waste bins in color:

      Sorry I did not understand. do you want to have standard icons but with different color for icon and text ?

      yes so is it!

      A 1 Reply Last reply Reply Quote 0
      • A Offline
        ashishtank Module Developer @kusselin
        last edited by

        @kusselin Sorry was occupied with something. The symbol is optional, if you do not provide it then it will take the default icon.
        Below is my config and output, Notice the new year’s day.

        customEvents: [
        	 {
        		"keyword": "Christmas Day",
        		"symbol": "calendar-icon-christmas",
        		"color": "red"
        	 },
        	 {
        		"keyword": "New Year's Day",
        		"color": "yellow"
        	 },
        	 {
        		"keyword": "Easter Sunday",
        		"symbol": "calendar-icon-easter",
        		"color": "blue"
        	 }
        	]
        
        2020-12-21-22-54-04-Clipboard
        1 Reply Last reply Reply Quote 0
        • kusselinK Offline
          kusselin
          last edited by kusselin

          @ashishtank said in Display waste bins in color:

          Sorry was occupied with something. The symbol is optional, if you do not provide it then it will take the default icon.
          Below is my config and output, Notice the new year’s day.

          Hi no problem … I want something … thank you very much.

          But does the config have to be copied into the custom.css or the normal css?

          EDIT: I have this copied in my costum .css but the colours are not displayed :-)

          what make i wrong?

          /*****************************************************
           * Magic Mirror                                      *
           * Custom CSS                                        *
           *                                                   *
           * By Michael Teeuw http://michaelteeuw.nl           *
           * MIT Licensed.                                     *
           *                                                   *
           * Add any custom CSS below.                         *
           * Changes to this files will be ignored by GIT. *
           *****************************************************/
          
           body {
             zoom: 70%;
             margin: 5px;
            position: absolute;
            height: calc(100% - 10px);
            width: calc(100% - 10px);
           }
           
          customEvents: [
          	 {
          		"keyword": "Grüne Tonne plus",
          		"color": "green"
          	 },
          	 {
          		"keyword": "Biomüll",
          		"color": "brown"
          	 },
          	 {
          		"keyword": "Restmüll",
          		"color": "gray"
          	 }
          	 {
          		"keyword": "Glasbox",
          		"color": "blue"
          	 }
          	]
          
          

          Green bin plus and glass box, etc. are the names of the words in the Google Calendar

          A 1 Reply Last reply Reply Quote 0
          • A Offline
            ashishtank Module Developer @kusselin
            last edited by ashishtank

            @kusselin The config is JSON and should never be added to css. you need to add this in config.json for calendars check below for new year’s day

            {
            	module: "calendar",
            	header: "NL Holidays",
            	position: "top_left",
            	config: {
            		calendars: [
            			{
            				symbol: "calendar-check",
            				url: "webcal://www.calendarlabs.com/ical-calendar/ics/101/Netherlands_Holidays.ics"
            			}
            		],
            		customEvents: [
            			 {
            				"keyword": "Christmas Day",
            				"symbol": "calendar-icon-christmas",
            				"color": "red"
            			 },
            			 {
            				"keyword": "New Year's Day",
            				"color": "yellow"
            			 },
            			 {
            				"keyword": "Easter Sunday",
            				"symbol": "calendar-icon-easter",
            				"color": "blue"
            			 }
            		]
            	}
            },
            
            1 Reply Last reply Reply Quote 0
            • kusselinK Offline
              kusselin
              last edited by

              Can You help me please in the config.js…

              here is my code but ist not show :

              {
              			module: "calendar",
              			header: "Abfalltermine 2021",
              			position: "top_left",
              			config: {
              				calendars: [
              					{
              						symbol: "calendar-check",
              						url: "https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"		
              					}
              					
              				],
              				
              				customEvents: [
              	 {
              		"keyword": "Grüne Tonne plus",
              		"color": "green"
              	 },
              	 {
              		"keyword": "Biomüll",
              		"color": "brown"
              	 },
              	 {
              		"keyword": "Restmüll",
              		"color": "gray"
              	 }
              	 {
              		"keyword": "Glasbox",
              		"color": "blue"
              	 }
              	]
              				
              			}
              		},  
              
              1 Reply Last reply Reply Quote 0
              • A Offline
                ashishtank Module Developer
                last edited by

                @kusselin : looks like you are missing comma in your config.js

                2020-12-27-14-06-58-Clipboard

                1 Reply Last reply Reply Quote 0
                • kusselinK Offline
                  kusselin
                  last edited by

                  @kusselin said in Display waste bins in color:

                  customEvents: [
                  {
                  “keyword”: “Grüne Tonne plus”,
                  “color”: “green”
                  },
                  {
                  “keyword”: “Biomüll”,
                  “color”: “brown”
                  },
                  {
                  “keyword”: “Restmüll”,
                  “color”: “gray”
                  }
                  {
                  “keyword”: “Glasbox”,
                  “color”: “blue”
                  }
                  ]

                  now the code is so, but the colours are not displayed :-(

                  {
                  			module: "calendar",
                  			header: "Abfalltermine 2021",
                  			position: "top_left",
                  			config: {
                  				calendars: [
                  					{
                  						symbol: "calendar-check",
                  						url: "https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"		
                  					}
                  					
                  				],
                  				
                  				customEvents: [
                  	 {
                  		"keyword": "Grüne Tonne plus",
                  		"color": "green"
                  	 },
                  	 {
                  		"keyword": "Biomüll",
                  		"color": "brown"
                  	 },
                  	 {
                  		"keyword": "Restmüll",
                  		"color": "gray"
                  	 },
                  	 {
                  		"keyword": "Glasbox",
                  		"color": "blue"
                  	 }
                  	]
                  				
                  				
                  	}
                  },
                  

                  image0.jpeg

                  1 Reply Last reply Reply Quote 0
                  • A Offline
                    ashishtank Module Developer
                    last edited by

                    @kusselin Can you check if your code is reaching here ?

                    1. Open dev tool using ctrl + shift + i
                    2. Go to sources tab
                    3. Press control + P to get the files list
                    4. Type calendar.js
                    5. Keep break point at below position and also few more breakpoints before it.
                    6. Press F5 to reload the Magic Mirror
                    7. If it hits break point, you can press F10 to step to each line and you can press F8 to continue execution (if it reaches to highlighted line then it should work)

                    Also check if there are any errors in console.

                    ![0_1609090681231_42989268-d442-4247-a154-548820a43acb-image.png](Uploading 100%)

                    2020-12-27-18-35-28-Magic-Mirror

                    1 Reply Last reply Reply Quote 0
                    • kusselinK Offline
                      kusselin
                      last edited by kusselin

                      Hi, its very difficult but i will try it

                      I can do this with mozilla browser… right?

                      In my config.js i no error because when an error is there the MM doesn‘t start then

                      Is the code so correct… with the Biotonne usw.

                      This is the word same in the google calender

                      Must i open the dev console when MM is running?

                      A S 2 Replies Last reply Reply Quote 0
                      • A Offline
                        ashishtank Module Developer @kusselin
                        last edited by

                        @kusselin you can open dev tools in Mozilla browser as well (key might be different). Yes MM should be running.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 2 / 6
                        • First post
                          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