• 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.

Display waste bins in color

Scheduled Pinned Locked Moved Custom CSS
52 Posts 3 Posters 14.4k 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.
  • K Offline
    kusselin
    last edited by Dec 17, 2020, 5:51 PM

    @ashishtank said in Display waste bins in color:

    Hi I will get back to you on this, it will not possible with only css but you also need to do some changes in javascript file to assign correct css class to the first checbox icon based on the bin type text.

    ohjeee o.k. thank you very much

    A 1 Reply Last reply Dec 17, 2020, 6:00 PM Reply Quote 0
    • A Offline
      ashishtank Module Developer @kusselin
      last edited by Dec 17, 2020, 6:00 PM

      @kusselin Edited my answer above.

      1 Reply Last reply Reply Quote 0
      • K Offline
        kusselin
        last edited by kusselin Dec 19, 2020, 5:52 PM Dec 19, 2020, 5:51 PM

        Hi very thanks to you for the css… but i will only that the text an the standard icon for calender like in my photo is in the color…you know what i mean? No fa-icon in the christmas look …

        best regards

        A 1 Reply Last reply Dec 19, 2020, 5:54 PM Reply Quote 0
        • A Offline
          ashishtank Module Developer @kusselin
          last edited by Dec 19, 2020, 5:54 PM

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

          1 Reply Last reply Reply Quote 0
          • K Offline
            kusselin
            last edited by Dec 21, 2020, 8:01 AM

            @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 Dec 21, 2020, 9:56 PM Reply Quote 0
            • A Offline
              ashishtank Module Developer @kusselin
              last edited by Dec 21, 2020, 9:56 PM

              @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
              • K Offline
                kusselin
                last edited by kusselin Dec 26, 2020, 1:01 PM Dec 26, 2020, 12:53 PM

                @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 Dec 26, 2020, 11:29 PM Reply Quote 0
                • A Offline
                  ashishtank Module Developer @kusselin
                  last edited by ashishtank Dec 27, 2020, 1:13 PM Dec 26, 2020, 11:29 PM

                  @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
                  • K Offline
                    kusselin
                    last edited by Dec 27, 2020, 10:32 AM

                    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 Dec 27, 2020, 1:08 PM

                      @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
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 2 / 6
                      2 / 6
                      • First post
                        11/52
                        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