New Calendar Icon dont´t change color.

xeroxu

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

Mykle1

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

xeroxu

@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

Mykle1

@xeroxu

You’re welcome, mate!