New Calendar Icon dont´t change color.



  • Hello, I use the default calendar Module with Google. Now I want to put in a new Symbol in a special color but it will no work. The other Symbols are colored in the css ith fa.fa.

    Here my config

    {
    			module: "calendar",
    			header: "Appuntamenti",
    			position: "top_left",
    			maximumEntries: 8,
    			config: {
    				colored: true,
            timeformat: 'absolute',
    		 		urgency: 0,
    				getRelative: 0,
    				calendars: [
    {
    						symbol: "trash-o ",
    						url: 'https://calendar.google.com/calendar/ical/basic.ics'
    						
    				},
    	
    
    {
    						symbol: "calendar-check-o ",
    						url: 'https://calendar.google.com/calendar/ical/basic.ics'
    						
    				}
    				]
    			}
    		},
    		{
                  
    			module: "calendar",
    			header: "Compleanni",
    			position: "bottom_left",
    		        config: {
                                    timeformat: 'absolute',
    				urgency: 0,
    				getRelative: 0,				
    				calendars: [
                                            {
                                                    symbol: "birthday-cake ",
                                                    url: 'https://calendar.google.com/calendar/ical/basic.ics'
                                    }
                                    ]
                            }
                    },
    
    

    birthday-cake and calendar-check-o are colored and now I need a yellow trashcan.

    heree the css code

    /*****************************************************
     * 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 {
    }
    
    .brightb {
    color: #55acee;
    }
    .currentweather .wi-sunrise {
    color: #ffd700;
    }
    .currentweather .wi-sunset {
    color: #ffa500;
    }
    .currentweather .wi-day-sunny {
    color: #ffff00;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-degrees {
    color: #415;
    }
    .currentweather .wi-rain {
    color: #55acee;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-night-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-day-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-snow {
    color: #fff;
    }
    .currentweather .wi-fog {
    color: #999;
    }
    .currentweather .wi-night-clear {
    color: #fff;
    }
    .currentweather .wi-night-rain {
    color: #55acee;
    }
    .currentweather .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    
    .currentweather .humidityIcon {
    color: #55acee;
    }
    
    .weatherforecast .wi-sunrise {
    color: #ffd700;
    }
    .weatherforecast .wi-sunset {
    color: #ffa500;
    }
    .weatherforecast .wi-day-sunny {
    color: #ffff00;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-degrees {
    color: #415;
    }
    .weatherforecast .wi-rain {
    color: #55acee;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-night-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-day-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-thunderstorm {
    color: #ff00ff;
    }
    .weatherforecast .wi-snow {
    color: #fff;
    }
    .weatherforecast .wi-fog {
    color: #999;
    }
    .weatherforecast .wi-night-clear {
    color: #fff;
    }
    .weatherforecast .wi-night-rain {
    color: #55acee;
    }
    .weatherforecast .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    
    .fa.fa-calendar {
      color: #ffff00; /* Yellow */
    }
    .fa.fa-birthday-cake {
      color: #FF69B4; /* Red */
    }
    .fa.fa-calendar-check-o {
      color: #55acee; /* Magenta */
    }
    
    .fa.fa-calendar-bell {
      color: #ffa500; /* Magenta */
    }
    
    .fa.fa-calendar-trash-o {
      color: #FFFFFF; /* Yellow */
    }
    
    .fa.fa-calendar-trash {
      color: #FFFF00; /* Magenta */
    }
    
    
    }
    
    

    hope i dont have a to great mistake :(


  • Module Developer

    @xeroxu said in New Calendar Icon dont´t change color.:

    hope i dont have a to great mistake :(

    Two things here.

    Your custom.css entry should be

    .calendar .fa.fa-trash-o {
      color: yellow; /* Yellow */
    }
    

    And you had the color code color: #FFFFFF; /* Yellow */
    #FFFFFF is for white, not yellow. You would have to find the code for the yellow that you want.



  • @Mykle1 Thank you very much , this worked it out, not that i dont know the right hex code for yellow but i have 2 trashcans trash-o and trash , but i din´t know that I can change the Color by putting in the Name like “yellow” is yellow . Now my Problem is fixed again with your help.THX


  • Module Developer

    @xeroxu

    You’re welcome, mate! :-)


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.